/* ============================================================
   DFTB — Design Tokens (source unique de vérité)

   Ce fichier est :
   - Importé par src/styles/global.css (consommé par toutes les
     pages Astro via le bundle).
   - Servi en statique par Astro sous /app/tokens.css (depuis
     public/).
   - Linké directement par src/pages/index.astro (landing publique
     SSR servie par nginx sur / via proxy_pass /app/).

   Modifier UN SEUL endroit met à jour toutes les pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
[data-palette="cream-cobalt"] {
  --bone:        #F6F4EF;
  --cream:       #ECE9E0;
  --paper:       #FFFFFF;
  --ink:         #16191F;
  --ink-90:      #242832;
  --ink-70:      #444A56;
  --ink-50:      #767B86;
  --ink-25:      #B2B6BD;
  --ink-12:      #D5D7DC;
  --ink-06:      #E5E7EA;

  --accent:      #2F4FB3;
  --accent-soft: #A8B6DE;
  --accent-tint: #D6DDF0;

  --gain:        #5A7A5A;
  --gain-soft:   #C9D6C5;
  --loss:        #A4513F;
  --loss-soft:   #E5C4B7;
  --warn:        #B58A3D;
  --info:        #2F4FB3;

  --surface-0:   var(--bone);
  --surface-1:   var(--cream);
  --surface-2:   var(--paper);
  --fg-1:        var(--ink);
  --fg-2:        var(--ink-70);
  --fg-3:        var(--ink-50);
  --hairline:    var(--ink-12);
}

[data-palette="bone-terracotta"] {
  --bone:        #F5F1EA;
  --cream:       #ECE6DA;
  --paper:       #FFFFFF;
  --ink:         #1A1815;
  --ink-90:      #2A2723;
  --ink-70:      #4A4540;
  --ink-50:      #7A746C;
  --ink-25:      #B8B1A6;
  --ink-12:      #D8D2C7;
  --ink-06:      #E6E0D5;

  --accent:      #C4623F;
  --accent-soft: #E8B89E;
  --accent-tint: #F4DDC9;

  --gain:        #5A7A5A;
  --gain-soft:   #C9D6C5;
  --loss:        #A4513F;
  --loss-soft:   #E5C4B7;
  --warn:        #B58A3D;
  --info:        #4A6B7C;

  --surface-0:   var(--bone);
  --surface-1:   var(--cream);
  --surface-2:   var(--paper);
  --fg-1:        var(--ink);
  --fg-2:        var(--ink-70);
  --fg-3:        var(--ink-50);
  --hairline:    var(--ink-12);
}

[data-palette="ink-sage"] {
  --bone:        #F4F4F1;
  --cream:       #E9E9E3;
  --paper:       #FFFFFF;
  --ink:         #15171A;
  --ink-90:      #232629;
  --ink-70:      #44484C;
  --ink-50:      #74787C;
  --ink-25:      #B0B4B6;
  --ink-12:      #D4D6D5;
  --ink-06:      #E4E5E2;

  --accent:      #4A7A5E;
  --accent-soft: #A9C5B3;
  --accent-tint: #D5E4D9;

  --gain:        #4A7A5E;
  --gain-soft:   #C5D6CB;
  --loss:        #A04A3F;
  --loss-soft:   #E0BFB7;
  --warn:        #B58A3D;
  --info:        #4A6B7C;

  --surface-0:   var(--bone);
  --surface-1:   var(--cream);
  --surface-2:   var(--paper);
  --fg-1:        var(--ink);
  --fg-2:        var(--ink-70);
  --fg-3:        var(--ink-50);
  --hairline:    var(--ink-12);
}

[data-theme="dark"] {
  --bone:        #1A1815;
  --cream:       #232017;
  --paper:       #2A271E;
  --ink:         #F2EEE5;
  --ink-90:      #E2DDD2;
  --ink-70:      #B8B1A6;
  --ink-50:      #8A8378;
  --ink-25:      #5A544B;
  --ink-12:      #3A352D;
  --ink-06:      #2C281F;

  --hairline:    var(--ink-12);
  --surface-0:   var(--bone);
  --surface-1:   var(--cream);
  --surface-2:   var(--paper);
  --fg-1:        var(--ink);
  --fg-2:        var(--ink-70);
  --fg-3:        var(--ink-50);
}

[data-theme="dark"][data-palette="cream-cobalt"],
[data-theme="dark"]:not([data-palette]) {
  --accent:      #6F8AD9;
  --accent-soft: #2A3760;
  --accent-tint: #1B2340;
}
[data-theme="dark"][data-palette="bone-terracotta"] {
  --accent:      #E07B57;
  --accent-soft: #5C3525;
  --accent-tint: #3A2218;
  --gain:        #8FAE89;
  --loss:        #C97968;
}
[data-theme="dark"][data-palette="ink-sage"] {
  --accent:      #7AAE8E;
  --accent-soft: #2D4736;
  --accent-tint: #1F2F25;
}

/* ============================================================
   TYPE
   ============================================================ */

:root {
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;
  --fs-64: 64px;
  --fs-96: 96px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  --tr-tight: -0.02em;
  --tr-snug:  -0.01em;
  --tr-base:  0;
  --tr-loose: 0.04em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 120px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-pill: 999px;

  --shadow-1: 0 1px 0 0 var(--hairline);
  --shadow-2: 0 8px 24px rgba(26, 24, 21, 0.06), 0 1px 0 0 var(--hairline);
  --shadow-3: 0 24px 64px rgba(26, 24, 21, 0.12), 0 1px 0 0 var(--hairline);

  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  --max-width:        80rem;
  --sidebar-width:    15rem;
  --sidebar-collapsed: 4rem;
}