/* Starshop — design tokens. THE single source of truth for the design
   language (VISION.md Design; enforced by test/design/design_tokens_test.rb:
   definitions live only here, every other stylesheet consumes var()).
   School: tesla.com/starlink.com — near-black ink on white, hairlines,
   tracked uppercase microlabels, generous whitespace. */

:root {
  color-scheme: light;

  /* — color — */
  --ink: #171a20;            /* primary text, buttons, outlines */
  --paper: #ffffff;          /* page ground and text on ink */
  --dim: #5c5e62;            /* secondary text, labels */
  --hairline: #e2e3e3;       /* dividers, input borders, panel borders */
  --hairline-soft: #f0f0f0;  /* table row separators */
  --wash: #f4f4f4;           /* media placeholders, quiet surfaces */
  --ghost: #d9dadb;          /* placeholder glyphs in media areas */
  --placeholder: #a5a7aa;    /* input placeholder text */
  --alert: #b74134;          /* errors only — used sparingly */

  /* — type scale (D-DIN; sizes as used, smallest to largest) — */
  --text-micro: 10px;        /* chips */
  --text-label: 11px;        /* microlabels, table headers, receipt terms */
  --text-ghost-btn: 11px;    /* ghost buttons */
  --text-cta: 12px;          /* primary buttons */
  --text-mono: 13px;         /* monospace ids, hints, empty states */
  --text-small: 14px;        /* descriptions, tables, forms, flash */
  --text-body: 15px;         /* body copy, prices */
  --text-brand: 16px;        /* the nameplate */
  --text-title: 17px;        /* card titles */
  --text-stat: 30px;         /* console stat values */
  --text-hero: 34px;         /* storefront hero */
  --text-hero-narrow: 26px;  /* storefront hero under the medium breakpoint */
  --text-display: 64px;      /* media placeholder glyphs */

  /* — tracking — */
  --track-tight: 0.02em;
  --track-loose: 0.06em;
  --track-label: 0.24em;     /* microlabels */
  --track-brand: 0.34em;     /* the nameplate */

  /* — spacing scale (4px base; adopt on touch, full sweep with the
       component-conversion backlog item) — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* — radii — */
  --radius-xs: 2px;          /* chips */
  --radius-sm: 4px;          /* buttons, inputs, flash */
  --radius-md: 6px;          /* media blocks */
  --radius-lg: 8px;          /* panels */

  /* — breakpoints (reference values; CSS media queries cannot read
       custom properties — keep these literals in sync by hand) —
     narrow: 390px · medium: 768px · wide: 1280px */
}