/* ========================================================================
   Rokudan SaaS — Design Tokens
   ======================================================================== */

:root {
  /* —— Couleurs base —— */
  --cream:        #FAF6E8;
  --cream-2:      #F5F0DD;
  --cream-3:      #EFE9D2;
  --paper:        #FFFFFF;
  --ink:          #0A0A0A;
  --ink-2:        #18181B;
  --ink-3:        #27272A;
  /* Mute palette — WCAG AA sur cream et blanc.
     --mute  : 6.93:1 sur cream (texte courant, body)
     --mute-2 : 4.39:1 sur cream (gros texte ≥18px, libellés discrets)
     --mute-3 : usage purement décoratif (séparateurs, hints) */
  --mute:         #4B5563;
  --mute-2:       #6B7280;
  --mute-3:       #9CA3AF;
  --mute-4:       #D1D5DB;

  /* —— Lignes & surfaces —— */
  --line:         rgba(10, 10, 10, 0.07);
  --line-2:       rgba(10, 10, 10, 0.04);
  --line-strong:  rgba(10, 10, 10, 0.14);
  --surface:      #FFFFFF;
  --surface-2:    #FBFAF5;
  --surface-3:    #F4F1E6;

  /* —— Accent signature —— */
  --violet:       #7747FF;
  --violet-2:     #5E2EE8;
  --violet-3:     #4A1CC4;
  --violet-soft:  rgba(119, 71, 255, 0.10);
  --violet-mist:  rgba(119, 71, 255, 0.04);

  /* —— États & data —— */
  --green:        #16A34A;
  --green-soft:   rgba(22, 163, 74, 0.10);
  --red:          #DC2626;
  --red-soft:     rgba(220, 38, 38, 0.10);
  --orange:       #EA580C;
  --orange-soft:  rgba(234, 88, 12, 0.10);
  --amber:        #D97706;
  --amber-soft:   rgba(217, 119, 6, 0.10);
  --blue:         #2563EB;
  --blue-soft:    rgba(37, 99, 235, 0.10);
  --pink:         #DB2777;
  --pink-soft:    rgba(219, 39, 119, 0.10);
  --teal:         #0D9488;
  --teal-soft:    rgba(13, 148, 136, 0.10);

  /* —— Typographies —— */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* —— Échelle typographique —— */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   32px;
  --fs-4xl:   42px;
  --fs-5xl:   56px;
  --fs-6xl:   72px;
  --fs-7xl:   96px;

  /* —— Échelle d'espacement —— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;
  --sp-14: 160px;

  /* —— Rayons —— */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-3xl:  36px;
  --r-pill: 999px;

  /* —— Ombres —— */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 10, 10, 0.05);
  --shadow-md: 0 6px 22px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 18px 50px rgba(10, 10, 10, 0.10);
  --shadow-xl: 0 30px 90px rgba(10, 10, 10, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-violet: 0 8px 32px rgba(119, 71, 255, 0.25);

  /* —— Transitions —— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 480ms;

  /* —— Layouts —— */
  --sidebar-w:    260px;
  --topbar-h:     72px;
  --container:    1320px;
}