/* alien-lab/tokens.css
 * ALIEN LAB Coffee Bar — canonical design tokens.
 * "Earth's finest experiment": a dark laboratory bar where the latte art is the only warm thing in the room.
 * Every colour, type, space, radius and motion value lives here. Components bind var(--token) only.
 * Fonts: load ./fonts/fonts.css before this file (self-hosted, SIL OFL 1.1).
 */

:root {
  color-scheme: dark;

  /* ── Brand raw palette (reference only — bind the semantic roles below) ── */
  --al-void: #0b0c0d;        /* lab floor: the matte black of the cups */
  --al-chassis: #151719;     /* machine body */
  --al-chassis-2: #1e2124;   /* raised panel */
  --al-hairline: #2e3236;    /* instrument rule */
  --al-hairline-soft: #212427;
  --al-steel: #8f969c;       /* brushed steel — secondary text */
  --al-milk: #f1f2f0;        /* microfoam white — primary text */
  --al-milk-2: #c9cdcf;      /* foam in shadow — long body copy */
  --al-crema: #c98a4b;       /* crema — the only warm colour */
  --al-crema-deep: #8e5a26;  /* crema on light grounds */
  --al-signal: #b6f23a;      /* alien signal — LIVE + the one primary action */
  --al-plate: #eceeee;       /* light lab plate — print / light context */
  --al-alarm: #ff6b5a;       /* errors only */

  /* ── Semantic roles (shared contract) ── */
  --bg: var(--al-void);
  --surface: var(--al-chassis);
  --surface-2: var(--al-chassis-2);
  --surface-warm: var(--al-chassis-2);
  --fg: var(--al-milk);
  --fg-2: var(--al-milk-2);
  --muted: var(--al-steel);
  --meta: var(--al-crema);
  --border: var(--al-hairline);
  --border-soft: var(--al-hairline-soft);
  --accent: var(--al-signal);
  --accent-on: var(--al-void);
  --accent-hover: color-mix(in oklab, var(--al-signal), white 18%);
  --accent-active: color-mix(in oklab, var(--al-signal), black 12%);
  --warm: var(--al-crema);
  --success: var(--al-signal);
  --warn: var(--al-crema);
  --danger: var(--al-alarm);

  /* ── Type ── */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 12px;    /* mono labels, specimen codes */
  --text-sm: 14px;    /* captions, helper text */
  --text-base: 17px;  /* body */
  --text-lg: 20px;    /* lead */
  --text-xl: 28px;    /* h3 */
  --text-2xl: 40px;   /* h2 */
  --text-3xl: 64px;   /* h1 */
  --text-4xl: 112px;  /* statement */
  --text-display: clamp(56px, 11vw, 168px); /* wordmark-scale statement */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-body: 1.6;
  --leading-snug: 1.25;
  --leading-tight: 0.95;
  --tracking-display: -0.035em;
  --tracking-label: 0.14em;   /* mono caps labels */
  --measure: 68ch;

  /* ── Space (8px grid, 4px half-step) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --section-y-desktop: 128px;
  --section-y-tablet: 88px;
  --section-y-phone: 64px;

  /* ── Shape: instruments are square, specimens are round ── */
  --radius-sm: 2px;      /* controls, inputs */
  --radius-md: 4px;      /* panels, cards */
  --radius-lg: 8px;      /* large media frames */
  --radius-pill: 9999px; /* badges + chips only */
  --radius-specimen: 50%;/* the cup — circular crops only */
  --rule: 1px;
  --rule-strong: 2px;

  /* ── Elevation: flat — hairlines carry structure ── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 24px 64px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--al-signal);

  /* ── Motion: precise, short, purposeful ── */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;
  --motion-exit: 160ms;
  --motion-pulse: 1600ms;   /* LIVE indicator only */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* ── Layout ── */
  --container-max: 1240px;
  --container-gutter-desktop: 40px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
  --touch-min: 44px;
}

/* Light lab-plate context: print offers, documents, white event walls.
 * Apply with [data-context="plate"] on a page or subtree. Signal green is not used here. */
[data-context="plate"] {
  color-scheme: light;
  --bg: var(--al-plate);
  --surface: #ffffff;
  --surface-2: #f6f7f7;
  --surface-warm: #f6f7f7;
  --fg: var(--al-void);
  --fg-2: #2b2f33;
  --muted: #555c62;
  --meta: var(--al-crema-deep);
  --border: #c7cccf;
  --border-soft: #dde1e3;
  --accent: var(--al-void);
  --accent-on: var(--al-milk);
  --accent-hover: #24282c;
  --accent-active: #000000;
  --warm: var(--al-crema-deep);
  --success: #2f6b2a;
  --warn: var(--al-crema-deep);
  --danger: #b3261e;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--al-void);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
    --motion-exit: 0ms;
  }
}