/* =================================================
   DESIGN TOKENS — Single source of truth
   ================================================= */

:root {
  /* Colors */
  --c-bg:          #F4F2ED;
  --c-bg-dark:     #141414;
  --c-paper:       #FFFFFF;
  --c-ink:         #141414;
  --c-ink-soft:    #4A4A48;
  --c-ink-muted:   #8A8884;
  --c-rule:        #D8D4CB;
  --c-rule-strong: #A8A4A0;
  --c-accent:      #A63D25;
  --c-accent-hover:#8B3220;
  --c-ok:          #2B7A4B;

  /* Typography */
  --f-display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --t-mono-xs:    10px;
  --t-mono-sm:    11px;
  --t-mono-md:    12px;
  --t-mono-lg:    13px;
  --t-body-sm:    14px;
  --t-body-md:    16px;
  --t-body-lg:    17px;
  --t-body-xl:    19px;
  --t-display-sm: clamp(28px, 3.5vw, 40px);
  --t-display-md: clamp(32px, 4.5vw, 54px);
  --t-display-lg: clamp(42px,   6vw, 78px);
  --t-display-xl: clamp(56px,  10vw, 152px);

  /* Spacing (4pt scale) */
  --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:  96px;
  --s-10: 128px;

  /* Layout */
  --col-max:        1440px;
  --pad-x:          clamp(20px, 5vw, 96px);
  --section-pad-y:  clamp(64px, 10vw, 128px);

  /* Motion — reduced from 800ms per ui-ux-pro-max guidance */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    200ms;
  --dur-med:     400ms;
  --dur-slow:    600ms;
}