/* Anamor app: the design tokens, the vendored fonts and the page basics.
   This file is the only place colours, fonts, radii, shadows and spacing are defined (DESIGN.md,
   2026-10-19). Two themes: the server draws <html data-theme="dark|light">; dark is also the
   default when the attribute is missing. Components live in css/frame.css (top bar, theme
   switch, frame) and css/components.css (buttons, chips, forms, cards, labels).
   Light differs from DESIGN.md in two values, darkened for 4.5:1 text contrast on every surface:
   --accent/--warn #B8540A -> #B3520A and --accent-hi #D9761F -> #A65A18.
   The Countdown Line screens add --font-display, the display sizes and the --cd-* colours (night,
   panel, raised panel, rule, chalk, second chalk, dim, signal and its hover, band, lightbox) in
   both theme blocks, and the .cd scope, which remaps every generic colour name a component reads
   (--bg, --fg, --line, --accent, --accent-hover ...) to them for a page that carries class="cd"
   on <body> (every customer page, Task 6). The app is dark only for now (theme.DARK_ONLY), so
   the light --cd-* values are not drawn yet; they are kept at 4.5:1 so the light theme can come
   back without a second look. */

/* Shared: type, shape and spacing (8 px grid). */
:root {
  --font-head: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* The big condensed numbers and headings of the Countdown Line; falls back to the head face. */
  --font-display: "Barlow Condensed", var(--font-head);
  /* The header band's big value (desktop, phone). */
  --text-display: 56px;
  --text-display-sm: 40px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text: 15px;
  --text-lg: 17px;
  --text-brand: 22px;
  --h1: 26px;
  --h2: 18px;
  --leading: 1.55;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border: 1px;
  --border-selected: 2px;
  --bar: 3px;
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --control: 44px;
  --chip-height: 32px;
  --icon: 22px;
  --topbar-height: 64px;
  --narrow: 480px;
  /* Small labels read the same in both themes: sentence case, no extra tracking (13b). */
  --label-case: none;
  --label-tracking: 0;
}

/* Dark (A, graphite): the homepage's values, blue accent. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070A;
  --panel: #0B0F14;
  --panel-2: #11161D;
  --line: #161A20;
  --line-strong: #1E242C;
  --fg: #F5F7FA;
  --fg-2: #C9D1D9;
  --muted: #9AA4AF;
  --accent: #1D6FD8;
  --accent-hover: #1A63C4;
  --accent-hi: #6CB4FF;
  --on-accent: #FFFFFF;
  --warn: #E2A27F;
  --ok: #6CB4FF;
  --photo-tile: #E9ECEF;
  /* Roles. Link text uses the bright blue: --accent as text is only 3.95:1 on --panel. */
  --link: var(--accent-hi);
  --danger: #FF6B6B;
  --warn-soft: #17120E;
  --chip-on-bg: var(--fg);
  --chip-on-fg: var(--bg);
  --switch-on-bg: var(--panel-2);
  --switch-on-fg: var(--fg);
  --switch-on-line: var(--accent);
  --shadow: none;
  /* Countdown Line (the demo's palette): night page, panel card, rule hairline, chalk text, dim
     quiet text, signal amber accent, band teal accent, lightbox pale tile for product photos. */
  --cd-night: #0F1113;
  --cd-panel: #181B20;
  --cd-panel-2: #1F232A;
  --cd-rule: #2A2F38;
  --cd-chalk: #F1EEE7;
  --cd-chalk-2: #D3CFC7;
  --cd-dim: #8C929A;
  --cd-signal: #FFB21E;
  --cd-signal-hover: #E6A00F;
  --cd-band: #5CC2B0;
  --cd-lightbox: #E9E8E3;
}

/* Light (C, warm gallery): orange accent, a faint shadow. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FAF8F4;
  --panel: #FFFFFF;
  --panel-2: #F4F1EA;
  --line: #E8E1D7;
  --line-strong: #DCD3C7;
  --fg: #1F1B16;
  --fg-2: #3B352E;
  --muted: #6E665C;
  --accent: #B3520A;
  --accent-hover: #9E4806;
  --accent-hi: #A65A18;
  --on-accent: #FFFFFF;
  --warn: #B3520A;
  --ok: #2F7A4F;
  --photo-tile: #EFE9E0;
  --link: var(--accent);
  --danger: #B42318;
  --warn-soft: #FCF3EA;
  --chip-on-bg: var(--fg);
  --chip-on-fg: #FFFFFF;
  --switch-on-bg: var(--fg);
  --switch-on-fg: #FFFFFF;
  --switch-on-line: var(--fg);
  --shadow: 0 1px 2px rgb(40 30 20 / .04), 0 8px 24px rgb(40 30 20 / .06);
  /* Countdown Line, same names: paper for night and panel, ink for chalk, signal and band darkened
     to read as text on both. Not drawn while the app is dark only. */
  --cd-night: #FAF8F4;
  --cd-panel: #FFFFFF;
  --cd-panel-2: #F4F1EA;
  --cd-rule: #DCD3C7;
  --cd-chalk: #1F1B16;
  --cd-chalk-2: #3B352E;
  --cd-dim: #6E665C;
  --cd-signal: #945A00;
  --cd-signal-hover: #7A4A00;
  --cd-band: #1D7567;
  --cd-lightbox: #E9E8E3;
}

/* The Countdown Line scope: <body class="cd"> on every customer page. It only points the
   generic names at the countdown tokens, so every component keeps working inside it; links stay
   chalk (underlined), and the focus ring, the primary button (darker amber on hover) and the
   selection take the amber signal, with night text on it; good news is the teal band, a product
   photo sits on the lightbox. The names :root builds from others (--link, --chip-on-*,
   --switch-on-*) are named here again: a custom property is resolved where it is declared, so
   they would keep the :root values otherwise. */
.cd {
  --bg: var(--cd-night);
  --panel: var(--cd-panel);
  --panel-2: var(--cd-panel-2);
  --line: var(--cd-rule);
  --line-strong: var(--cd-rule);
  --fg: var(--cd-chalk);
  --fg-2: var(--cd-chalk-2);
  --muted: var(--cd-dim);
  --accent: var(--cd-signal);
  --accent-hover: var(--cd-signal-hover);
  --accent-hi: var(--cd-signal);
  --on-accent: var(--cd-night);
  --ok: var(--cd-band);
  --link: var(--cd-chalk);
  --photo-tile: var(--cd-lightbox);
  --chip-on-bg: var(--cd-chalk);
  --chip-on-fg: var(--cd-night);
  --switch-on-bg: var(--cd-panel-2);
  --switch-on-fg: var(--cd-chalk);
  --switch-on-line: var(--cd-signal);
}

/* Vendored fonts (latin subset, see VENDORED.md). */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-tight-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-tight-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

/* Page basics. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--text)/var(--leading) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--text-lg); }
p { margin: 0; }
b, strong { font-weight: 500; }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Keyboard focus is always visible; nothing in the app removes it. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Small helpers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
/* Sizes such as 74 × 82 × 32 mm. */
.dims { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Small mono labels, the same in both themes. */
.label {
  font: 500 var(--text-xs)/1.3 var(--font-mono);
  text-transform: var(--label-case);
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}
/* File types such as PDF or STEP. */
.filetype {
  font: 500 var(--text-xs)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }