/* ═══════════════════════════════════════════════════════════
   YANGO ACADEMY — DESIGN SYSTEM "OBSIDIAN & OR"
   Tokens de design. Source unique de vérité visuelle.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Profondeurs ── */
  --void:        #06070A;
  --deep:        #0A0C11;
  --raise:       #0F1218;
  --elevate:     #141821;

  /* ── Surfaces vitrées ── */
  --glass-1:     rgba(255, 255, 255, 0.028);
  --glass-2:     rgba(255, 255, 255, 0.052);
  --glass-3:     rgba(255, 255, 255, 0.08);
  --hairline:    rgba(255, 255, 255, 0.085);
  --hairline-lit:rgba(255, 255, 255, 0.16);

  /* ── Or métallique ── */
  --gold-lum:    #FBF0C4;
  --gold-hi:     #F2DC94;
  --gold:        #D4AF37;
  --gold-mid:    #B8912A;
  --gold-deep:   #8A6A16;
  --gold-glow:   rgba(212, 175, 55, 0.32);
  --gold-veil:   rgba(212, 175, 55, 0.10);
  --gold-mist:   rgba(212, 175, 55, 0.045);

  --grad-gold:   linear-gradient(135deg, #FBF0C4 0%, #E8CB6A 22%, #D4AF37 50%, #B8912A 78%, #8A6A16 100%);
  --grad-gold-h: linear-gradient(100deg, #FBF0C4, #D4AF37 55%, #A8801F);
  --grad-sheen:  linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 62%);

  /* ── Accents ── */
  --cyan:        #52E5FA;
  --cyan-deep:   #1BA8C4;
  --cyan-veil:   rgba(82, 229, 250, 0.10);
  --violet:      #8B6BFF;
  --violet-veil: rgba(139, 107, 255, 0.10);
  --ember:       #FF6B4A;
  --ember-veil:  rgba(255, 107, 74, 0.10);
  --jade:        #34D8A0;
  --jade-veil:   rgba(52, 216, 160, 0.10);
  --crimson:     #F2564D;
  --crimson-veil:rgba(242, 86, 77, 0.10);

  /* ── Encre ── */
  --ink:         #F4F5F7;
  --ink-soft:    #C3C7D1;
  --ink-mute:    #8B909D;
  --ink-faint:   #5C6069;

  /* ── Typographie ── */
  --f-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-read: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --f-num:  "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace;

  --t-hero:  clamp(2.4rem, 7.2vw, 4.6rem);
  --t-xxl:   clamp(1.95rem, 5.4vw, 3.1rem);
  --t-xl:    clamp(1.55rem, 4.1vw, 2.25rem);
  --t-lg:    clamp(1.22rem, 2.9vw, 1.55rem);
  --t-md:    1.0625rem;
  --t-base:  0.9688rem;
  --t-sm:    0.875rem;
  --t-xs:    0.7813rem;
  --t-tiny:  0.6875rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.62;
  --lh-read:  1.78;

  /* ── Rythme ── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 22px;  --s6: 30px;  --s7: 42px;  --s8: 58px;
  --s9: 78px;  --s10: 104px;

  /* ── Rayons ── */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-full: 999px;

  /* ── Ombres ── */
  --sh-sm:   0 2px 10px rgba(0,0,0,.34);
  --sh-md:   0 10px 34px rgba(0,0,0,.44);
  --sh-lg:   0 26px 68px rgba(0,0,0,.56);
  --sh-gold: 0 12px 40px rgba(212,175,55,.24), 0 2px 10px rgba(212,175,55,.16);
  --sh-lift: 0 20px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.055);

  /* ── Mouvement ── */
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-soft:   cubic-bezier(.4, 0, .2, 1);
  --d-fast: .18s; --d-mid: .34s; --d-slow: .62s; --d-lush: .9s;

  --z-bg: 0; --z-base: 1; --z-raise: 10; --z-sticky: 100;
  --z-nav: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500;

  --reading-width: 34rem;
  --shell-width: 1180px;
}

/* ── Thème sépia (confort de lecture) ── */
[data-theme="sepia"] {
  --void: #1A1611; --deep: #201B14; --raise: #272117; --elevate: #2E271B;
  --ink: #F2E8D5; --ink-soft: #D6C9B0; --ink-mute: #A2957E; --ink-faint: #6E6455;
  --hairline: rgba(212, 175, 55, .13);
  --glass-1: rgba(255, 240, 200, .028);
  --glass-2: rgba(255, 240, 200, .05);
}

/* ── Thème clair ── */
[data-theme="light"] {
  --void: #F6F7F9; --deep: #FFFFFF; --raise: #FFFFFF; --elevate: #F1F3F6;
  --ink: #14161B; --ink-soft: #3C4149; --ink-mute: #6B7280; --ink-faint: #9AA0AA;
  --glass-1: rgba(14, 18, 26, .022);
  --glass-2: rgba(14, 18, 26, .042);
  --glass-3: rgba(14, 18, 26, .07);
  --hairline: rgba(14, 18, 26, .11);
  --hairline-lit: rgba(14, 18, 26, .2);
  --gold: #9A7B1C; --gold-hi: #B8942B;
  --sh-md: 0 10px 30px rgba(20,25,40,.09);
  --sh-lg: 0 24px 60px rgba(20,25,40,.13);
  --sh-lift: 0 18px 48px rgba(20,25,40,.12), 0 0 0 1px rgba(14,18,26,.06);
}

/* ── Confort de lecture : taille de police ── */
[data-fontsize="s"] { --reading-scale: .92; }
[data-fontsize="m"] { --reading-scale: 1; }
[data-fontsize="l"] { --reading-scale: 1.12; }
[data-fontsize="xl"]{ --reading-scale: 1.26; }
:root { --reading-scale: 1; }

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: .01ms; --d-mid: .01ms; --d-slow: .01ms; --d-lush: .01ms; }
}