/* =========================================================
   IBUDO – Colors & Type
   Source: Charte Graphique IBUDO (Décembre 2024)
   ========================================================= */

/* -----------------------------
   Web fonts
   - Primary:   Outfit (self-hosted, fonts/Outfit-*.ttf — official IBUDO files)
   - Secondary: Figtree (self-hosted, fonts/Figtree-*.ttf — official IBUDO files)
   ----------------------------- */

/* Outfit */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/Outfit-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/Outfit-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Outfit-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Outfit-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Outfit-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Outfit-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Outfit-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Outfit-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Outfit-Black.ttf') format('truetype');
}

/* Figtree */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Figtree-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Figtree-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Figtree-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Figtree-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Figtree-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Figtree-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Figtree-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Figtree-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Figtree-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Figtree-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Figtree-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Figtree-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Figtree-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Figtree-BlackItalic.ttf') format('truetype');
}

:root {
  /* =========================================================
     BRAND PALETTE — primaires
     Sampled from the official SVG logo files — wordmark + center dot
     are #1863DC, the inner-arc gradient stop is #01F462,
     the official "logo on dark" background is Midnight Blue #191970.
     ========================================================= */
  --ibudo-blue:    #1863DC;  /* Bleu — confiance et sérénité (wordmark, dot) */
  --ibudo-navy:    #191970;  /* Midnight Blue — official "logo sur fond sombre" canvas */
  --ibudo-black:   #000000;  /* Noir — main symbol arc */
  --ibudo-yellow:  #F8F326;  /* Jaune or — chaleur, optimisme */
  --ibudo-green:   #01F462;  /* Vert émeraude — dynamisme, vitalité (gradient stop) */
  --ibudo-purple:  #AD61FF;  /* Violet améthyste — élégance, créativité */
  --ibudo-red:     #FF4E63;  /* Rouge pastèque — énergie, passion */

  /* Tints (déclinaisons claires officielles, charte p.18) */
  --ibudo-blue-200:   #357AE9;
  --ibudo-blue-300:   #5A92ED;
  --ibudo-blue-400:   #91B6F3;

  --ibudo-purple-200: #C085FF;
  --ibudo-purple-300: #CA99FF;
  --ibudo-purple-400: #DFC2FF;

  --ibudo-red-200:    #FF707C;
  --ibudo-red-300:    #FF858F;
  --ibudo-red-400:    #FFD6DA;

  --ibudo-yellow-200: #FAF875;
  --ibudo-yellow-300: #FBFA9D;
  --ibudo-yellow-400: #FDFDD8;

  --ibudo-green-200: #20FE79;
  --ibudo-green-300: #5DFE9D;
  --ibudo-green-400: #EFFFE0;

  /* Neutrals — anchored on #0A0F1F (rich near-black, inferred) */
  --ink-900: #0A0F1F;   /* Default foreground / titles */
  --ink-800: #1B2236;
  --ink-700: #2E3650;
  --ink-600: #4A5476;
  --ink-500: #6E7896;
  --ink-400: #9AA3BD;
  --ink-300: #C4CADD;
  --ink-200: #E2E5EE;
  --ink-100: #F1F3F8;
  --ink-50:  #F8F9FC;
  --white:   #FFFFFF;

  /* =========================================================
     SEMANTIC TOKENS
     ========================================================= */
  --bg:           var(--white);
  --bg-elevated:  var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);     /* default body text */
  --fg-muted:     var(--ink-600);     /* secondary copy */
  --fg-subtle:    var(--ink-500);     /* meta / captions */
  --fg-inverse:   var(--white);

  --border:       var(--ink-200);
  --border-strong:var(--ink-300);

  --accent:           var(--ibudo-blue);
  --accent-hover:     #1257C8;
  --accent-pressed:   #0E4AAD;
  --accent-fg:        var(--white);
  --accent-soft:      #E8F0FD;

  /* Inverse / "fond sombre" surface — official Midnight Blue */
  --bg-brand-dark:    var(--ibudo-navy);
  --fg-on-brand-dark: var(--white);

  --success: var(--ibudo-green);
  --warning: var(--ibudo-yellow);
  --danger:  var(--ibudo-red);
  --info:    var(--ibudo-blue);
  --magic:   var(--ibudo-purple);

  /* =========================================================
     GRADIENTS (charte p.21)
     Linear or radial; combine adjacent palette colors
     ========================================================= */
  --grad-blue:    linear-gradient(135deg, #1863DC 0%, #5A92ED 100%);
  --grad-yellow:  linear-gradient(135deg, #FBFA9D 0%, #F7F327 100%);
  --grad-green:   linear-gradient(135deg, #01F462 0%, #5DFE9D 100%);
  --grad-purple:  linear-gradient(135deg, #DFC2FF 0%, #AD62FF 100%);
  --grad-red:     linear-gradient(135deg, #FF4E5E 0%, #884DA7 100%);
  /* Signature inner-arc gradient — the small arc on the "O ouvert" runs
     from green (top) to electric blue (bottom). Sampled directly from
     the master logo SVG (stops #01F462 and #1863DC). */
  --grad-arc:     linear-gradient(180deg, #01F462 0%, #01F462 47%, #1863DC 87%, #1863DC 100%);
  /* Looser brand sweep — for hero backgrounds, posters, decorative use */
  --grad-brand:   linear-gradient(95deg, #01F462 0%, #1863DC 38%, #AD61FF 70%, #FF4E63 100%);
  --grad-brand-radial: radial-gradient(circle at 30% 70%, #01F462 0%, #1863DC 35%, #AD61FF 70%, #FF4E63 100%);

  /* =========================================================
     TYPE — base
     ========================================================= */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --w-thin:    100;
  --w-xlight:  200;
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-xbold:   800;
  --w-black:   900;

  /* Type scale (modular, 1.250 ratio anchored on 16px) */
  --fs-12: 0.75rem;     /* 12px — caption / micro */
  --fs-14: 0.875rem;    /* 14px — small */
  --fs-16: 1rem;        /* 16px — body */
  --fs-18: 1.125rem;    /* 18px — body large */
  --fs-20: 1.25rem;     /* 20px — lead */
  --fs-24: 1.5rem;      /* 24px — h5 */
  --fs-30: 1.875rem;    /* 30px — h4 */
  --fs-36: 2.25rem;     /* 36px — h3 */
  --fs-48: 3rem;        /* 48px — h2 */
  --fs-64: 4rem;        /* 64px — h1 */
  --fs-80: 5rem;        /* 80px — display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-norm:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-norm:    0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* =========================================================
     SPACING (4px base grid)
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =========================================================
     RADII (rounded-but-not-bubbly; matches Outfit's character)
     ========================================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — soft, low-contrast (light brand vibe)
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(10, 15, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 15, 31, 0.06), 0 1px 2px rgba(10, 15, 31, 0.04);
  --shadow-md: 0 8px 20px rgba(10, 15, 31, 0.08), 0 2px 4px rgba(10, 15, 31, 0.04);
  --shadow-lg: 0 20px 40px rgba(10, 15, 31, 0.10), 0 4px 8px rgba(10, 15, 31, 0.05);
  --shadow-xl: 0 32px 64px rgba(10, 15, 31, 0.14);
  /* Color halo — used sparingly under brand-tinted CTAs */
  --shadow-blue:   0 12px 28px rgba(24, 98, 219, 0.30);
  --shadow-purple: 0 12px 28px rgba(173, 97, 255, 0.30);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-norm: 200ms;
  --dur-slow: 380ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply via class or directly on tags
   ========================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-norm);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings: Outfit, tight tracking, weighted hierarchy */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-80);
  font-weight: var(--w-light);    /* "Grand Titre" → Outfit Thin/Light */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--w-regular);   /* "Sous-Titre" → Outfit Regular */
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-norm);
  color: var(--fg);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-norm);
  color: var(--fg-muted);
  font-weight: var(--w-regular);
}

small, .small, .caption {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--w-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, kbd, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}

a, .link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover {
  color: var(--accent-hover);
  border-bottom-color: currentColor;
}

/* Selection uses the signature blue */
::selection { background: var(--ibudo-blue); color: var(--white); }

/* =========================================================
   BRAND UTILITIES
   ========================================================= */
.surface-dark {
  background: var(--ibudo-navy);
  color: var(--white);
}
.surface-dark a, .surface-dark .link { color: var(--ibudo-green-200); }
.surface-dark .fg-muted { color: rgba(255, 255, 255, 0.72); }