/*
  Neural Grain tokens (v0.1, 2026-10-08)

  The system in one line: each title prints in one ink on near-neutral paper,
  and full color comes only from imagery.

  Rules that live in this file:
  - No color literals anywhere else in the new system. tests/test_ng_color_literals.py
    scans every stylesheet in app/static/css/ng/ except this one, and every studio
    template (studio_base.html and what renders inside it). Older stylesheets and
    the registry's generator colors are outside its scope (RULING-ng-site-gate0 §1).
  - Every ink must reach 4.5:1 on --paper (tests/test_ng_contrast.py enforces).
  - Fluid sizes interpolate between the 390 px and 1440 px boards.
*/

:root {
  color-scheme: light;

  /* Paper: near-neutral and below white, so image highlights out-shine it. */
  --paper: #eceee9;

  /* Inks. Contrast on --paper in the comment. */
  --ink-studio: #001489; /* 12.30:1, reflex blue, studio pages */
  --ink-kit: #af4c00;    /*  4.66:1, the kit's old #e8722a at the same hue, darkened; never lighten or tint */

  /* The page's ink. A title page sets data-title on <html> (see below). */
  --ink: var(--ink-studio);

  /* Type: Archivo variable, wght 100 to 900, wdth 62% to 125%. */
  --font-sans: "Archivo Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wdth-display: 125%;
  --wdth-label: 112%;
  --wdth-body: 100%;
  --weight-display: 800;
  --weight-label: 700;
  --weight-ui: 500;      /* interface text the boards draw at 500: header and nav links, footer rows (S7, D18) */
  --weight-body: 400;

  /* Fluid type, phone 390 to desktop 1440 (CSS px in the comments). */
  --step-hero-home: clamp(2.75rem, 1.543rem + 4.952vw, 6rem);       /* 44 to 96 */
  --step-hero-title: clamp(2.25rem, 1.229rem + 4.190vw, 5rem);      /* 36 to 80; phone value derived, confirm at Gate 3 */
  --step-h2: clamp(2rem, 1.629rem + 1.524vw, 3rem);                 /* 32 to 48 */
  --step-h3: clamp(1.625rem, 1.300rem + 1.333vw, 2.5rem);           /* 26 to 40, the pricing head */
  --step-price: clamp(5.5rem, 3.643rem + 7.619vw, 10.5rem);         /* 88 to 168 */
  --step-band: clamp(1.375rem, 1.096rem + 1.143vw, 2.125rem);       /* 22 to 34 */
  --step-lead: clamp(1.0625rem, 0.970rem + 0.381vw, 1.3125rem);     /* 17 to 21 */
  --step-body: 1.0625rem;                                           /* 17 */
  --step-small: 0.9375rem;                                          /* 15 */

  --leading-display: 1;
  --leading-body: 1.55;
  --tracking-display: -0.025em;

  /* Space */
  --space-gutter: clamp(1.5rem, 0.571rem + 3.810vw, 4rem);          /* 24 to 64 */
  --space-section: clamp(5rem, 3.607rem + 5.714vw, 8.75rem);        /* 80 to 140 */
  --space-plate: 2rem;                                              /* paper kept clear around images */

  /* Line, the first of the three tools (line, screen, solid). */
  --rule: 1.5px;

  /* Interaction */
  --target-min: 44px;
  --focus-ring: 2px solid var(--ink);
  --focus-offset: 3px;
}

/* One ink per title. Add a line per title: tests/test_ng_contrast.py fails for a
   registry ink without one, and reads every --ink-* above for the contrast floor. */
[data-title="kit"] {
  --ink: var(--ink-kit);
}