/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* --- Colors (light theme) --- */
  --color-bg:               #F5F5F5;
  --color-surface:          #EBEBEB;
  --color-surface-2:        #E0E0E0;
  --color-border:           #D0D0D0;
  --color-accent:           #1a1a1a;
  --color-accent-dim:       rgba(26, 26, 26, 0.08);
  --color-text-primary:     #1a1a1a;
  --color-text-secondary:   #888888;
  --color-text-muted:       #AAAAAA;
  --color-overlay:          rgba(245, 245, 245, 0.85);

  /* --- Typography --- */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'JetBrains Mono', monospace;
  --font-body:    'JetBrains Mono', monospace;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.75rem;    /* 28px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   4rem;       /* 64px */
  --text-6xl:   5.5rem;     /* 88px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* --- Spacing (4px base) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* --- Motion --- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 800ms;
  --duration-page:   1000ms;

  /* --- Z-index layers --- */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  50;
  --z-header:  100;
  --z-modal:   150;
  --z-loader:  200;
  --z-cursor:  300;

  /* --- Layout --- */
  --topbar-height:  52px;
  --footer-height:  52px;
  --page-padding-x: 24px;
  --card-width:     300px;
  --card-gap:       16px;
  --card-radius:    2px;
}