/*
 * Ui engine — base tokens (theme-agnostic).
 *
 * Scales shared across all themes: spacing, border, border-radius, opacity,
 * typography (font-family/size/weight, line-height, letter-spacing,
 * paragraph-spacing), responsive section/container. Color tokens belong in
 * each theme file, since they are part of visual identity.
 *
 * 1:1 mirror with the Tokens Figma library (D0VcOa7M1IzQdCKhW2JPxS),
 * Breakpoints + Typography + Semantic (Numbers) collections. Names match
 * each variable's `codeSyntax.WEB`; numeric values match Figma's resolved
 * mode-default value, with the platform-appropriate CSS unit suffix.
 *
 * Consuming apps import this first, then a theme:
 *
 *   @import "ui/base";
 *   @import "ui/themes/indigo";
 */

:root {
  /* ──── Spacing scale (px) ──── */
  --spacing-0:   0;
  --spacing-2:   2px;
  --spacing-4:   4px;
  --spacing-8:   8px;
  --spacing-10:  10px;
  --spacing-12:  12px;
  --spacing-16:  16px;
  --spacing-20:  20px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-40:  40px;
  --spacing-48:  48px;
  --spacing-56:  56px;
  --spacing-64:  64px;
  --spacing-72:  72px;
  --spacing-80:  80px;
  --spacing-112: 112px;
  --spacing-136: 136px;

  /* ──── Border-radius scale (px) ──── */
  --border-radius-none: 0;
  --border-radius-xs:   2px;
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-xl:   16px;
  --border-radius-2xl:  20px;
  --border-radius-3xl:  36px;
  --border-radius-full: 9999px;

  /* ──── Border width scale (px) ──── */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-5: 5px;
  --border-8: 8px;

  /* ──── Opacity scale (%) ────
     Figma stores these as raw numbers (0–80) without a unit. Using the
     percentage form keeps the value 1:1 with Figma and is valid wherever
     CSS expects an alpha-value (opacity, color-mix, etc.). */
  --opacity-0:  0%;
  --opacity-5:  5%;
  --opacity-10: 10%;
  --opacity-25: 25%;
  --opacity-30: 30%;
  --opacity-40: 40%;
  --opacity-50: 50%;
  --opacity-80: 80%;

  /* ──── Font families ──── */
  --font-family-headline:  "Space Grotesk", system-ui, sans-serif;
  --font-family-paragraph: "Work Sans", system-ui, sans-serif;

  /* ──── Font sizes (px) ──── */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-56: 56px;
  --font-size-96: 96px;

  /* ──── Font weights ──── */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ──── Line heights (px) ──── */
  --line-height-18:  18px;
  --line-height-20:  20px;
  --line-height-24:  24px;
  --line-height-26:  26px;
  --line-height-28:  28px;
  --line-height-30:  30px;
  --line-height-32:  32px;
  --line-height-34:  34px;
  --line-height-38:  38px;
  --line-height-44:  44px;
  --line-height-50:  50px;
  --line-height-56:  56px;
  --line-height-60:  60px;
  --line-height-66:  66px;
  --line-height-103: 103px;

  /* ──── Letter spacing (px) ────
     Figma's name has a literal "-1" (negative) segment; codeSyntax flattens
     to `--letter-spacing--1` (double dash). */
  --letter-spacing-0:  0;
  --letter-spacing--1: -1px;

  /* ──── Paragraph spacing (px) ──── */
  --paragraph-spacing-0:  0;
  --paragraph-spacing-12: 12px;
  --paragraph-spacing-14: 14px;
  --paragraph-spacing-16: 16px;
  --paragraph-spacing-18: 18px;
  --paragraph-spacing-20: 20px;
  --paragraph-spacing-24: 24px;
  --paragraph-spacing-30: 30px;
  --paragraph-spacing-36: 36px;
  --paragraph-spacing-48: 48px;
  --paragraph-spacing-60: 60px;
  --paragraph-spacing-72: 72px;

  /* ──── Responsive section + container (px) ────
     Mirrors Figma's Breakpoints collection, which encodes per-mode values
     across Desktop-xl / Desktop-lg / Tablet-md / Mobile-sm. Mobile-first
     cascade: :root holds Mobile-sm, media queries widen upward. */
  --section-max-width:  768px;
  --section-min-width:  375px;
  --section-margins:    24px;
  --container-max-width: 327px;

  /* ──── Engine-only ──── */
  --breakpoint-sm: 640px;   /* mobile landscape */
  --breakpoint-md: 768px;   /* tablet */
  --breakpoint-lg: 1024px;  /* desktop */
  --breakpoint-xl: 1280px;  /* wide desktop */

  /* Touch target minimum — Apple HIG / Material both mandate 44px. */
  --touch-target-min: 44px;

  /* 16px on inputs prevents iOS auto-zoom on focus. */
  --input-font-size: var(--font-size-16);
}

@media (min-width: 768px) {  /* Tablet-md */
  :root {
    --section-max-width:  1024px;
    --section-min-width:  768px;
    --section-margins:    36px;
    --container-max-width: 696px;
  }
}

@media (min-width: 1024px) {  /* Desktop-lg */
  :root {
    --section-max-width:  1280px;
    --section-min-width:  1024px;
    --section-margins:    40px;
    --container-max-width: 944px;
  }
}

@media (min-width: 1280px) {  /* Desktop-xl */
  :root {
    --section-max-width:  1920px;
    --section-min-width:  1280px;
    --section-margins:    40px;
    --container-max-width: 1200px;
  }
}