/* ddj-design — tokens.css : SOURCE CANONIQUE des design tokens DDJ.
   Bloc :root extrait VERBATIM du kit « Doc du Juriste - App UI Kit (standalone).html »
   (version COMPLETE, 90 tokens — decision Founder BO-D2c). 0 retape de valeur.
   A vendorer dans le static/ de chaque app. Voir README.md + DESIGN_SYSTEM.md. */

:root {
  /* ---------- Brand palette (raw) ---------- */
  --ddj-bordeaux:       #C0125F;
  --ddj-bordeaux-90:    #A50F52;
  --ddj-bordeaux-80:    #8A0C44;
  --ddj-bordeaux-tint:  #F5E3EC;

  --ddj-anthracite:     #1A1A1A;
  --ddj-mid-grey:       #4A4A4A;
  --ddj-light-grey:     #9A9A9A;

  --ddj-cream:          #F7F6F4;
  --ddj-cream-deep:     #F0EEEA;
  --ddj-white:          #FFFFFF;
  --ddj-border:         #E2E0DC;
  --ddj-border-strong:  #C9C6C0;

  --ddj-magenta:        #F10E84;       /* SIGNATURE — sparingly */
  --ddj-magenta-tint:   #FDE3F0;

  --ddj-green:          #1A8050;
  --ddj-green-tint:     #E2F1EA;
  --ddj-amber:          #CC6B1A;
  --ddj-amber-tint:     #F8ECDF;

  /* ---------- Semantic color tokens ---------- */
  --color-bg:           var(--ddj-cream);
  --color-bg-deep:      var(--ddj-cream-deep);
  --color-surface:      var(--ddj-white);
  --color-surface-alt:  var(--ddj-cream-deep);

  --color-fg:           var(--ddj-anthracite);
  --color-fg-muted:     var(--ddj-mid-grey);
  --color-fg-subtle:    var(--ddj-light-grey);
  --color-fg-on-primary: var(--ddj-white);

  --color-primary:      var(--ddj-bordeaux);
  --color-primary-hover: var(--ddj-bordeaux-90);
  --color-primary-press: var(--ddj-bordeaux-80);
  --color-primary-tint: var(--ddj-bordeaux-tint);

  --color-accent:       var(--ddj-magenta);   /* signal only */
  --color-accent-tint:  var(--ddj-magenta-tint);

  --color-border:       var(--ddj-border);
  --color-border-strong: var(--ddj-border-strong);
  --color-divider:      var(--ddj-border);

  --color-success:      var(--ddj-green);
  --color-success-tint: var(--ddj-green-tint);
  --color-warning:      var(--ddj-amber);
  --color-warning-tint: var(--ddj-amber-tint);

  /* ---------- Typography ---------- */
  --font-serif:  'Fraunces', ui-serif, Georgia, serif;
  --font-sans:   'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based, mobile-first) */
  --fs-display: 2.5rem;       /* 40px — splash / marketing */
  --fs-h1:      2rem;         /* 32px */
  --fs-h2:      1.5rem;       /* 24px */
  --fs-h3:      1.25rem;      /* 20px */
  --fs-h4:      1.0625rem;    /* 17px — card titles */
  --fs-body:    1rem;         /* 16px */
  --fs-meta:    0.875rem;     /* 14px */
  --fs-small:   0.8125rem;    /* 13px */
  --fs-eyebrow: 0.6875rem;    /* 11px UPPERCASE */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-base:    0;
  --tracking-eyebrow: 0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  /* ---------- Radii ---------- */
  --radius-sm:    4px;
  --radius-btn:   6px;
  --radius-card:  8px;
  --radius-lg:    12px;
  --radius-pill:  999px;

  /* ---------- Borders ---------- */
  --border-hairline: 0.5px solid var(--color-border);
  --border-default:  1px solid var(--color-border);

  /* ---------- Shadows (functional only) ---------- */
  --shadow-sm:   0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.03);
  --shadow-md:   0 4px 12px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-lg:   0 12px 32px rgba(26, 26, 26, 0.10), 0 2px 8px rgba(26, 26, 26, 0.05);
  --shadow-pop:  0 16px 40px rgba(26, 26, 26, 0.16);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:    cubic-bezier(0, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ---------- Layout ---------- */
  --app-max-w:    760px;
  --topbar-h:     56px;
  --tabbar-h:     64px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}