/* ============================================
   Tier 1 — Primitive Tokens
   Raw scale values. Theme-agnostic. No semantic meaning.
   Component module.css MUST NOT reference these directly;
   use Tier 2 (semantic.css) aliases instead.

   Responsive strategy:
   - Page-level layout: @media with the breakpoint values below
   - Component-level: container queries on a parent with container-type
   - Token redefinition for global responsive scales: inside @media
     blocks within this file (single source of responsive token truth)
   ============================================ */

:root {
  /* ===== Spacing scale (px parity at 16px root) ===== */
  --space-0:   0;
  --space-px:  1px;
  --space-0_5:  0.125rem;   /* 2px  */
  --space-0_75: 0.1875rem;  /* 3px  */
  --space-1:    0.25rem;    /* 4px  */
  --space-1_25: 0.3125rem;  /* 5px  */
  --space-1_5:  0.375rem;   /* 6px  */
  --space-1_75: 0.4375rem;  /* 7px  */
  --space-2:    0.5rem;     /* 8px  */
  --space-2_5: 0.625rem;   /* 10px */
  --space-3:   0.75rem;    /* 12px */
  --space-3_5: 0.875rem;   /* 14px */
  --space-4:   1rem;       /* 16px */
  --space-4_5: 1.125rem;   /* 18px */
  --space-5:   1.25rem;    /* 20px */
  --space-5_5: 1.375rem;   /* 22px */
  --space-6:   1.5rem;     /* 24px */
  --space-7:   1.75rem;    /* 28px */
  --space-8:   2rem;       /* 32px */
  --space-9:   2.25rem;    /* 36px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-14:  3.5rem;     /* 56px */
  --space-16:  4rem;       /* 64px */

  /* ===== Font-size scale (NEW SCALE, monospace-tuned) ===== */
  --font-size-2xs:  0.625rem;   /* 10px - table headers */
  --font-size-xs:   0.6875rem;  /* 11px - meta labels */
  --font-size-sm:   0.75rem;    /* 12px - small UI */
  --font-size-base: 0.8125rem;  /* 13px - terminal / list default */
  --font-size-md:   0.875rem;   /* 14px - body text */
  --font-size-lg:   0.9375rem;  /* 15px - large body */
  --font-size-xl:   1rem;       /* 16px - subheadings */
  --font-size-2xl:  1.125rem;   /* 18px - h3 */
  --font-size-3xl:  1.25rem;    /* 20px - h2 */
  --font-size-4xl:  1.5rem;     /* 24px - h1 */

  /* ===== Line-height scale ===== */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.7;

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

  /* ===== Border-radius scale ===== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  12px;
  --radius-pill: 9999px;

  /* ===== Motion scale ===== */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  --ease-standard: ease;
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast:   var(--duration-fast)   var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);
  --transition-slow:   var(--duration-slow)   var(--ease-out);

  /* ===== Z-index scale ===== */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  20;
  --z-overlay: 30;
  --z-chrome:  40;
  --z-popover: 60;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-debug:   9999;
}

/* ===== Responsive token overrides =====
   Tokens may be redefined inside @media blocks here so all global
   responsive scales live in one place. Component CSS continues to
   reference the same token name; the value automatically shrinks
   below the breakpoint. Threshold is the canonical lg (760, mirrors
   --bp-lg in tokens/breakpoints.css). */
@media (max-width: 760px) {
  :root {
    --space-8: 1.5rem;          /* 32 → 24px on mobile */
    --font-size-md: 0.8125rem;  /* 14 → 13px on mobile */
  }
}