/*
  tokens/base.css — Phase 0 token foundation, layer 1 of 3
  ---------------------------------------------------------
  Brand-agnostic primitives. NO brand colours, NO theme.
  Loaded by every consumer; theme files layer on top.
  Counterpart files (load order):
    1. tokens/base.css              (this file)
    2. tokens/teglo.dark.css        (theme — dark default)
    3. tokens/teglo.light.css       (theme — light)
  Legacy aliases live in tokens/legacy.css and are NOT loaded
  by new consumers. Phase 2 sweep retires legacy entirely.
*/

:root {
  /* Type stacks — the only place font literals live. */
  --font-display: 'Inter Display', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Font size scale */
  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.75rem;
  --fs-xxl:  2.5rem;

  /* Font weight scale */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line height */
  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-xxl: 3rem;

  /* Radius scale — canonical names only. Legacy --radius-sm / --radius-xs
     live in tokens/legacy.css as aliases until the Phase 2 sweep deletes them. */
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* Motion */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-medium:  250ms;
  --duration-slow:    400ms;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* Breakpoints — canonical */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Z-index scale */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-panel:    500;
  --z-modal:    1000;
  --z-toast:    2000;

  /* Layout */
  --container-max: 1280px;
}