/* ============================================================================
   MOON CAPITAL — Design tokens
   Deux thèmes à partir d'un seul jeu de variables.

   Les couleurs littérales du reste de la feuille passent par des « canaux » :
     rgba(var(--c-accent), calc(.13 * var(--k-accent)))
   Le canal donne la teinte, le multiplicateur l'intensité. Sur fond clair, un
   voile doit assombrir là où il éclaircissait sur fond sombre : c'est le canal
   qui s'inverse, pas chaque déclaration.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:            #17181c;
  --bg-2:          #1a1b20;
  --surface:       #1e2029;
  --surface-2:     #23263a;
  --surface-3:     #2a2e4a;
  --surface-glass: rgba(30, 32, 41, .62);

  /* ── Or & champagne ───────────────────────────────────────────────────── */
  --accent:          #7c86f8;   /*  5,6:1 — utilisable en texte      */
  --accent-bright:   #a5abfb;   /*  8,3:1                            */
  --accent-deep:     #4048c9;
  --accent-ink:      #ffffff;   /* texte posé sur l'indigo (4,6:1)   */
  --accent-soft:     #c2c7fa;   /* 10,9:1 — emphase                  */
  --ink:           #f2f3f5;   /* 16,0:1 */
  --ink-2:         #b4b9bf;   /*  9,0:1 */
  --ink-3:         #9aa0a8;   /*  6,7:1 */
  --ink-4:         #868c96;   /*  5,2:1 — porte tout le petit texte technique */
  --pos:           #7c86f8;
  --neg:           #f2766a;   /*  6,4:1 */
  --neutral:       #98a1ad;

  /* ── Canaux ───────────────────────────────────────────────────────────── */
  --c-accent: 88, 101, 242;    /* lavis et lueurs indigo           */
  --k-accent: 1.25;
  --c-veil:   214, 219, 255;   /* voile posé sur les surfaces      */
  --k-veil:   1;
  --c-sink:   14, 15, 20;      /* panneaux en creux                */
  --k-sink:   1;
  --c-bar:    35, 38, 58;      /* barres de fenêtre                */
  --k-bar:    1;
  --c-shadow: 0, 0, 0;         /* ombres portées                   */
  --k-shadow: 1;
  --c-ink:    242, 243, 245;   /* filets d'encre                   */
  --k-ink:    1;
  --c-white:  255, 255, 255;   /* éclats spéculaires               */
  --k-white:  1;

  /* Étages lumineux de la lune, du plus chaud au plus profond. */
  --c-moon-hot:   240, 242, 255;
  --c-moon-lit:   165, 171, 251;
  --c-moon-mid:   88, 101, 242;
  --c-moon-shade: 44, 50, 122;
  --c-moon-core:  15, 16, 32;
  --moon-base-1:  #1a1c2c;
  --moon-base-2:  #101118;
  --moon-glow-k:  1;

  /* Surface de volatilité (canvas / WebGL) */
  --mesh:       110, 122, 246;
  --mesh-crest: 194, 199, 250;
  --mesh-peak:  232, 235, 255;
  --mesh-fill:  20, 21, 30;
  --mesh-k:     1.15;

  /* ── Traits & voiles ──────────────────────────────────────────────────── */
  --line:          rgba(124, 134, 248, .22);
  --line-soft:     rgba(124, 134, 248, .13);
  --line-strong:   rgba(124, 134, 248, .42);
  --hairline:      rgba(242, 243, 245, .11);
  --veil:          rgba(88, 101, 242, .06);

  /* ── Verres ───────────────────────────────────────────────────────────── */
  --glass-nav:     rgba(23, 24, 28, .74);
  --glass-menu:    rgba(23, 24, 28, .97);
  --glass-tip:     rgba(23, 25, 34, .95);
  --glass-pill:    rgba(23, 24, 28, .85);

  /* ── Lueurs ───────────────────────────────────────────────────────────── */
  --glow-gold:     0 0 0 1px rgba(124, 134, 248, .24), 0 18px 60px -20px rgba(88, 101, 242, .45);
  --glow-soft:     0 24px 80px -32px rgba(88, 101, 242, .38);
  --shadow-card:   0 1px 0 0 rgba(242, 243, 245, .05) inset, 0 30px 70px -40px rgba(0, 0, 0, .85);
  --shadow-lift:   0 40px 90px -45px rgba(0, 0, 0, .9), 0 0 0 1px rgba(124, 134, 248, .18);

  /* Sélection et grain */
  --btn-1: #7d89ff;
  --btn-2: #5865f2;
  --btn-3: #4750d6;

  --accent-grad-1: var(--accent-soft);
  --accent-grad-2: var(--accent-bright);
  --accent-grad-3: var(--accent);
  --accent-grad-4: #4b55e0;
  --mark-glow:   rgba(255, 255, 255, .18);
  --mark-glow-hover: rgba(165, 171, 251, .5);

  --selection:     rgba(88, 101, 242, .4);
  --selection-ink: var(--accent-soft);
  --grain-opacity: .028;
  --grain-blend:   overlay;

  /* ── Typographie ──────────────────────────────────────────────────────── */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --t-display: clamp(2.75rem, 1.35rem + 5.9vw, 6.25rem);
  --t-h1:      clamp(2.35rem, 1.35rem + 4.3vw, 4.75rem);
  --t-h2:      clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  --t-h3:      clamp(1.375rem, 1.15rem + .95vw, 1.9rem);
  --t-h4:      clamp(1.0625rem, 1rem + .32vw, 1.25rem);
  --t-lead:    clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
  --t-body:    1rem;
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;
  --t-2xs:     .6875rem;

  --lh-tight:  1.04;
  --lh-snug:   1.16;
  --lh-body:   1.62;

  --tr-display: -.035em;
  --tr-tight:   -.022em;
  --tr-wide:    .14em;

  /* ── Rythme ───────────────────────────────────────────────────────────── */
  --gutter:    clamp(1.25rem, .6rem + 2.6vw, 2.75rem);
  --maxw:      1240px;
  --maxw-text: 720px;
  --section-y: clamp(5.5rem, 3rem + 9vw, 11rem);

  /* Angles quasi vifs : un instrument de mesure n'a pas de coins mous.
     La pastille reste réservée aux commandes, par contraste. */
  --r-xs: 1px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-pill: 999px;

  /* Trait de construction : épaisseur unique sur tout le site. */
  --rule: 1px;
  --tick: 7px;          /* longueur des équerres d'angle */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s;
  --dur:      .34s;
  --dur-slow: .72s;

  --z-nav: 100;
  --z-top: 200;

  /* ── Coloration syntaxique ────────────────────────────────────────────── */
  --code-kw:  #d7a2ff;
  --code-fn:  var(--accent-bright);
  --code-str: #9fd6a8;
  --code-num: #ffc978;
  --code-cm:  var(--ink-4);
  --code-ty:  #8fd3ff;
}

/* Grain filmique réutilisable (SVG inline, aucun fichier externe). */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════════
   THÈME CLAIR
   Ivoire chaud + or assombri. Chaque valeur d'encre et d'accent tient au moins
   4,5:1 sur le fond ; les marques de graphique tiennent 3:1.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme='light'] {
  color-scheme: light;

  --bg:            #f7f7fb;
  --bg-2:          #eeeef6;
  --surface:       #ffffff;
  --surface-2:     #fbfbff;
  --surface-3:     #e9eaf9;
  --surface-glass: rgba(255, 255, 255, .72);

  --accent:          #4048c9;   /*  6,6:1 */
  --accent-bright:   #333ab0;   /*  8,3:1 */
  --accent-deep:     #262c86;
  --accent-ink:      #ffffff;
  --accent-soft:     #2e3592;   /*  9,6:1 */

  --ink:           #14151a;   /* 17,1:1 */
  --ink-2:         #4b4e58;   /*  7,8:1 */
  --ink-3:         #585c66;   /*  6,3:1 */
  --ink-4:         #666a75;   /*  5,1:1 */

  --pos:           #4048c9;
  --neg:           #c33325;
  --neutral:       #5f6673;

  /* Canaux : le voile assombrit, l'or s'intensifie, l'ombre se réchauffe. */
  --c-accent:   88, 101, 242;
  --k-accent:   1.35;
  --c-veil:   26, 28, 46;
  --k-veil:   1.1;
  --c-sink:   214, 216, 234;
  --k-sink:   .62;
  --c-bar:    236, 238, 250;
  --k-bar:    1.7;
  --c-shadow: 42, 46, 92;
  --k-shadow: .3;
  --c-ink:    20, 21, 26;
  --k-ink:    .9;
  --c-white:  255, 255, 255;
  --k-white:  1;

  /* Sur ivoire, une sphère sombre ferait un trou : la lune s'éclaircit. */
  --c-moon-hot:   252, 253, 255;
  --c-moon-lit:   186, 192, 253;
  --c-moon-mid:   110, 122, 246;
  --c-moon-shade: 74, 83, 190;
  --c-moon-core:  58, 64, 150;
  --moon-base-1:  #cdd2fb;
  --moon-base-2:  #9aa2ee;
  --moon-glow-k:  .5;

  /* Sur ivoire, la grille doit foncer pour rester lisible. */
  --mesh:       74, 83, 190;
  --mesh-crest: 52, 59, 152;
  --mesh-peak:  38, 44, 134;
  --mesh-fill:  247, 247, 252;
  --mesh-k:     1.05;

  --line:          rgba(64, 72, 201, .26);
  --line-soft:     rgba(64, 72, 201, .15);
  --line-strong:   rgba(64, 72, 201, .46);
  --hairline:      rgba(20, 21, 26, .12);
  --veil:          rgba(88, 101, 242, .07);

  --glass-nav:     rgba(247, 247, 251, .8);
  --glass-menu:    rgba(247, 247, 251, .985);
  --glass-tip:     rgba(255, 255, 255, .97);
  --glass-pill:    rgba(255, 255, 255, .9);

  --glow-gold:     0 0 0 1px rgba(64, 72, 201, .24), 0 18px 44px -22px rgba(64, 72, 201, .34);
  --glow-soft:     0 22px 60px -34px rgba(64, 72, 201, .32);
  --shadow-card:   0 1px 0 0 rgba(255, 255, 255, .8) inset, 0 18px 42px -28px rgba(42, 46, 92, .3);
  --shadow-lift:   0 26px 56px -30px rgba(42, 46, 92, .35), 0 0 0 1px rgba(64, 72, 201, .18);

  --accent-grad-1: #262c86;
  --accent-grad-2: #4048c9;
  --accent-grad-3: #5865f2;
  --accent-grad-4: #333ab0;
  --mark-glow:   rgba(20, 21, 26, .12);
  --mark-glow-hover: rgba(64, 72, 201, .3);

  --selection:     rgba(88, 101, 242, .28);
  --selection-ink: var(--accent-deep);
  --grain-opacity: .022;
  --grain-blend:   multiply;

  --code-kw:  #7b31c4;
  --code-fn:  #3a41b8;
  --code-str: #2f6b3f;
  --code-cm:  #6b6f7c;
  --code-num: #9c5a12;
  --code-ty:  #1f6a94;
}

/* Sans choix explicite, on suit la préférence système. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: light;

    --bg:            #f7f7fb;
    --bg-2:          #eeeef6;
    --surface:       #ffffff;
    --surface-2:     #fbfbff;
    --surface-3:     #e9eaf9;
    --surface-glass: rgba(255, 255, 255, .72);

    --accent:          #4048c9;   /*  6,6:1 */
    --accent-bright:   #333ab0;   /*  8,3:1 */
    --accent-deep:     #262c86;
    --accent-ink:      #ffffff;
    --accent-soft:     #2e3592;   /*  9,6:1 */

    --ink:           #14151a;   /* 17,1:1 */
    --ink-2:         #4b4e58;   /*  7,8:1 */
    --ink-3:         #585c66;   /*  6,3:1 */
    --ink-4:         #666a75;   /*  5,1:1 */

    --pos:           #4048c9;
    --neg:           #c33325;
    --neutral:       #5f6673;

    --c-accent:   88, 101, 242;
    --k-accent:   1.35;
    --c-veil:   26, 28, 46;
    --k-veil:   1.1;
    --c-sink:   214, 216, 234;
    --k-sink:   .62;
    --c-bar:    236, 238, 250;
    --k-bar:    1.7;
    --c-shadow: 42, 46, 92;
    --k-shadow: .3;
    --c-ink:    20, 21, 26;
    --k-ink:    .9;

    --c-moon-hot:   252, 253, 255;
    --c-moon-lit:   186, 192, 253;
    --c-moon-mid:   110, 122, 246;
    --c-moon-shade: 74, 83, 190;
    --c-moon-core:  58, 64, 150;
    --moon-base-1:  #cdd2fb;
    --moon-base-2:  #9aa2ee;
    --moon-glow-k:  .5;

    --mesh:       74, 83, 190;
    --mesh-crest: 52, 59, 152;
    --mesh-peak:  38, 44, 134;
    --mesh-fill:  247, 247, 252;
  --mesh-k:     1.05;

    --line:          rgba(64, 72, 201, .26);
    --line-soft:     rgba(64, 72, 201, .15);
    --line-strong:   rgba(64, 72, 201, .46);
    --hairline:      rgba(20, 21, 26, .12);
    --veil:          rgba(88, 101, 242, .07);

    --glass-nav:     rgba(247, 247, 251, .8);
    --glass-menu:    rgba(247, 247, 251, .985);
    --glass-tip:     rgba(255, 255, 255, .97);
    --glass-pill:    rgba(255, 255, 255, .9);

    --glow-gold:     0 0 0 1px rgba(64, 72, 201, .24), 0 18px 44px -22px rgba(64, 72, 201, .34);
    --glow-soft:     0 22px 60px -34px rgba(64, 72, 201, .32);
    --shadow-card:   0 1px 0 0 rgba(255, 255, 255, .8) inset, 0 18px 42px -28px rgba(42, 46, 92, .3);
    --shadow-lift:   0 26px 56px -30px rgba(42, 46, 92, .35), 0 0 0 1px rgba(64, 72, 201, .18);

    --accent-grad-1: #262c86;
    --accent-grad-2: #4048c9;
    --accent-grad-3: #5865f2;
    --accent-grad-4: #333ab0;
    --mark-glow:   rgba(20, 21, 26, .12);
    --mark-glow-hover: rgba(64, 72, 201, .3);

    --selection:     rgba(88, 101, 242, .28);
    --selection-ink: var(--accent-deep);
    --grain-opacity: .022;
    --grain-blend:   multiply;

    --code-kw:  #7b31c4;
    --code-fn:  #3a41b8;
    --code-str: #2f6b3f;
    --code-cm:  #6b6f7c;
    --code-num: #9c5a12;
    --code-ty:  #1f6a94;
  }
}

/* Pas de transition de thème pendant le premier rendu ni au changement :
   seules les surfaces s'adoucissent, jamais les positions. */
:root.theme-shift,
:root.theme-shift * {
  transition: background-color .32s var(--ease-out),
              border-color .32s var(--ease-out),
              color .32s var(--ease-out),
              fill .32s var(--ease-out),
              box-shadow .32s var(--ease-out) !important;
}