/*
 * Autogrowth theme file: colour, type, spacing, shape and motion tokens.
 * Structure lives in /css/site.css and reads only these custom properties.
 * See THEME.md and DESIGN.md.
 *
 * Theme: "Kraftwerk". The engine drawn as a process plant on a black technical
 * drawing sheet. Achromatic only; state is carried by line weight, fill and
 * pattern, never by hue. One family (Archivo variable), width is the hierarchy.
 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  /* block, not swap: the expanded display face reflows badly with a fallback (CLS). */
  font-display: block;
}

:root {
  color-scheme: dark;

  /* Palette. Contrast on Schwarz: Weiß 17.9:1, Silber 8.8:1 (7.7:1 on Graphit), Zinn 4.2:1 (lines only). */
  --c-black: #000000;     /* Schwarz: the sheet */
  --c-graphite: #141414;  /* Graphit: filled fields */
  --c-raster: #2a2a2a;    /* Raster: frame, grid, empty pipes */
  --c-zinc: #6f6f6f;      /* Zinn: line work and control borders, never text */
  --c-silver: #a8a8a8;    /* Silber: secondary text, tags */
  --c-white: #ededed;     /* Weiß: text and the medium */
  --g-sheen: linear-gradient(180deg, #ffffff 0%, #d4d4d4 52%, #9a9a9a 100%);
  --g-bezel: linear-gradient(135deg, #f0f0f0, #7a7a7a 45%, #d8d8d8 70%, #8a8a8a);

  /* Roles */
  --c-bg: var(--c-black);
  --c-field: var(--c-graphite);
  --c-ink: var(--c-white);
  --c-ink-2: var(--c-silver);
  --c-rule: var(--c-raster);
  --c-line: var(--c-zinc);
  --c-strong: var(--c-silver);
  --c-focus: var(--c-white);
  --c-pipe: #4a4a4a;      /* empty pipe on the mini plant */
  --c-hatch: #232323;     /* error hatch inside the input */

  /* Drawing details (site.css uses these names, never raw values) */
  --c-frame-in: #3a3a3a;  /* inner border of the sheet frame */
  --c-mini-line: #d6d6d6; /* units of the mini plant */
  --c-grid: #0d0d0d;      /* grid behind the P&ID */
  --c-grid-sheet: #0b0b0b;/* grid behind the access sheet */
  --c-signal: #4d4d4d;    /* dashed signal lines */
  --c-shadow: #1e1e1e;    /* hard shadow of the reading flag */
  --c-lit: #161616;       /* panel row lit by its instrument */
  --c-face: #050505;      /* dial and counter faces */
  --c-drum: #1b1b1b;      /* counter drum shading */
  --c-drum-edge: #333333; /* counter drum edge */
  --c-row: #121212;       /* highlighted table row */
  --c-slot: #151515;      /* hatch of the empty badge slot */
  /* Silver strokes of the drawings: SVG gradient stops (a stroke cannot take a CSS gradient) */
  --c-steel-0: #8f8f8f;   /* plant units, from top left */
  --c-steel-1: #ececec;
  --c-steel-2: #a3a3a3;
  --c-steel-3: #d9d9d9;   /* ... to bottom right */
  --c-bezel-0: #f4f4f4;   /* dial bezels, from top left */
  --c-bezel-1: #6e6e6e;
  --c-bezel-2: #dcdcdc;
  --c-bezel-3: #7c7c7c;   /* ... to bottom right */

  /* Type: one family, width is the hierarchy */
  --font-sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --wd-display: 122%;
  --wd-head: 112%;
  --wd-body: 100%;
  --wd-tag: 74%;
  --wd-digit: 70%;
  --fw-light: 290;
  --fw-regular: 400;
  --fw-medium: 520;
  --fw-bold: 640;

  /* Scale (Bringhurst): 12 14 16 18 21 24 36 48 72 */
  --fs-tag: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --fs-l: 1.3125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 2.4vw, 3rem);
  --fs-display: clamp(2.625rem, 1.2rem + 4.4vw, 5.25rem);
  --lh-tight: 1.02;
  --lh-head: 1.14;
  --lh-body: 1.55;
  --track-display: -0.035em;
  --measure: 66ch;

  /* Space: 4 px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Sheet */
  --frame: 0px;           /* zone frame inset; set on wide screens below */
  --pad: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --page-max: 92rem;
  --rule: 1px;
  --rule-strong: 1.5px;
  --focus-w: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-ui: 180ms;
}

@media (min-width: 900px) {
  :root { --frame: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-ui: 0ms; }
}