/* ============================================================
   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/).

   Direction graphique : Things/Arc softer (sky-blue, lift hover,
   shadows tinted bleutées, radii bumpés, Inter Tight pour display).
   Bruno Ace SC réservé aux wordmarks "DFTB" via --font-wordmark.

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

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

:root {
  --bone:        #F8F6F1;
  --cream:       #F1EEE5;
  --paper:       #FFFFFF;
  --ink:         #1A1D24;
  --ink-90:      #262A33;
  --ink-70:      #494F5C;
  --ink-50:      #7A808C;
  --ink-25:      #B6BBC4;
  --ink-12:      #DCDFE5;
  --ink-06:      #ECEFF3;

  --accent:      #5B8FD9;
  --accent-deep: #2E6EC7;
  --accent-soft: #B8CFEC;
  --accent-tint: #E7EFFA;

  --gain:        #6B9E78;
  --gain-soft:   #C9D9CD;
  --loss:        #C97968;
  --loss-soft:   #E8C8C0;
  --warn:        #B58A3D;
  --info:        #5B8FD9;

  --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:    rgba(91, 143, 217, 0.14);
}

[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;

  --accent:      #6F8AD9;
  --accent-deep: #4A6BC8;
  --accent-soft: #2A3760;
  --accent-tint: #1B2340;

  --hairline:    rgba(91, 143, 217, 0.16);
  --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);
}

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

:root {
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-display:     'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
  --font-wordmark:    'Bruno Ace SC', system-ui, sans-serif;
  --font-emph:        ui-serif, 'New York', 'Iowan Old Style', Georgia, serif;

  --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: 8px; --r-md: 12px; --r-lg: 18px;
  --r-xl: 24px; --r-pill: 999px;

  --shadow-1:    0 1px 0 0 var(--hairline), 0 2px 6px rgba(91, 143, 217, 0.05);
  --shadow-2:    0 8px 24px rgba(91, 143, 217, 0.10), 0 1px 0 0 var(--hairline);
  --shadow-3:    0 24px 64px rgba(91, 143, 217, 0.14), 0 1px 0 0 var(--hairline);
  --shadow-lift: 0 12px 32px rgba(91, 143, 217, 0.14), 0 2px 8px rgba(91, 143, 217, 0.06);

  --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;
}