/* ============================================================
   Clauzy — tokens.css
   Design tokens: color, type, space, radius, elevation, motion.
   Palette is fixed: Acid (primary), Signal (secondary),
   Ultramark + Ink Violet (accents) + neutrals. No gradients.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --c-acid:        #E4FF30;   /* PRIMARY  — highlighter / markup */
  --c-acid-press:  #CFE926;
  --c-signal:      #008BFF;   /* SECONDARY — verified / link */
  --c-signal-press:#0072D1;
  --c-ultramark:   #5B23FF;   /* ACCENT 1 — AI attribution */
  --c-ultramark-press:#4A18DC;
  --c-inkviolet:   #362F4F;   /* ACCENT 2 — document ground */
  --c-inkviolet-2: #2A2440;

  /* ---- Neutrals (paper stack) ---- */
  --n-000: #FFFFFF;
  --n-025: #FBFBF8;   /* paper */
  --n-050: #F4F4EF;   /* soft surface */
  --n-100: #EAEAE3;   /* secondary surface */
  --n-200: #DDDDD4;   /* rule / hairline */
  --n-400: #9B998F;
  --n-600: #6A6862;
  --n-800: #33322E;
  --n-900: #17161A;   /* primary text */

  /* ---- Semantic ---- */
  --bg:            var(--n-025);
  --bg-alt:        var(--n-050);
  --surface:       var(--n-000);
  --surface-sunk:  var(--n-100);
  --ground:        var(--c-inkviolet);
  --rule:          var(--n-200);
  --rule-strong:   #C8C7BC;
  --rule-invert:   rgba(255,255,255,.20);
  --text:          var(--n-900);
  --text-body:     var(--n-800);
  --text-muted:    var(--n-600);
  --text-faint:    var(--n-400);
  --text-invert:   #FFFFFF;
  --text-invert-2: rgba(255,255,255,.68);
  --focus:         var(--c-ultramark);

  /* Severity — derived from the fixed palette only */
  --sev-high:      var(--c-ultramark);
  --sev-medium:    var(--c-acid);
  --sev-low:       var(--c-signal);

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.75rem, 1.35rem + 4.4vw, 5.25rem);
  --fs-h1:      clamp(2.15rem, 1.35rem + 2.6vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-mono:    .75rem;

  --lh-tight:   1.04;
  --lh-head:    1.14;
  --lh-body:    1.6;
  --lh-loose:   1.72;

  --tr-display: -.03em;
  --tr-head:    -.021em;
  --tr-mono:    .1em;

  /* ---- Space (4px grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 80px; --s-10: 96px; --s-11: 112px;

  --wrap: 1264px;
  --gutter: 32px;
  --measure: 68ch;

  /* ---- Radius ---- */
  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px;

  /* ---- Elevation ---- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(23,22,26,.05);
  --e-2: 0 1px 2px rgba(23,22,26,.05), 0 6px 16px rgba(23,22,26,.06);
  --e-3: 0 2px 4px rgba(23,22,26,.06), 0 18px 44px rgba(23,22,26,.12);

  /* ---- Controls (compact) ---- */
  --ctl-h:      40px;
  --ctl-h-sm:   36px;
  --ctl-h-lg:   44px;
  --input-h:    40px;
  --card-pad:   24px;
  --sec-pad:    var(--s-11);
  --sec-pad-sm: var(--s-8);

  /* ---- Motion ---- */
  --dur-micro: 160ms;
  --dur-fast:  220ms;
  --dur-comp:  320ms;
  --dur-slow:  460ms;
  --dur-page:  180ms;
  --ease-out-premium: cubic-bezier(.16,.84,.32,1);
  --ease-in-premium:  cubic-bezier(.55,.06,.68,.19);
  --ease-standard:    cubic-bezier(.4,0,.2,1);
  --ease-overshoot:   cubic-bezier(.22,1.2,.36,1);
  --stagger: 90ms;
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --sec-pad: var(--s-8); --sec-pad-sm: var(--s-7); --card-pad: 20px; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
}