/* ==========================================================================
   UG · p4-spec · "Datasheet" · tokens rev. B (30.10.26)
   Engineered like hardware, documented like a manual.
   Single source for index.html and system.html.
   ========================================================================== */

/* One family, OFL, self-hosted, latin subset, variable (wght + wdth). */
@font-face {
  font-family: "Mona Sans UG";
  src: url("fonts/mona-sans/mona-sans-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: "Volt" (chosen by Danny 30.10.26). Near-white, true
     black, ONE electric chartreuse used big: buttons and the band.
     Previous "Bone" values are kept in palettes/README.md. ------------- */
  --paper:      #FAFAF7;  /* Paper. Near-white, a breath warm */
  --paper-2:    #F0F0EB;  /* Plate. Placeholders, swatch grounds */
  --ink:        #0B0B0B;  /* Black. All type and rules derive from it */
  --ink-2:      #60605F;  /* Grey 2. Labels, secondary text, 6.0:1 on paper */
  --ink-3:      #838382;  /* Grey 3. Continuations 22px and up, 3.6:1 */
  --rule:       rgb(11 11 11 / 0.13);  /* Hairline, 13% black */
  --rule-strong:rgb(11 11 11 / 0.55);  /* Registration marks, footnote rule */
  --brand:      #D2FF1F;  /* Volt. The one colour: buttons, the band, selection */
  --brand-ink:  #0B0B0B;  /* Type on volt, 16.9:1 */
  --band:       var(--brand);          /* The one bright band (Principle) */
  --band-ink:   var(--brand-ink);
  --band-ink-2: #5F7213;               /* Continuation and label on the band, 4.6:1 */
  --band-rule:  rgb(11 11 11 / 0.16);
  --signal:     var(--ink);  /* Status square. Black, so volt stays for actions */

  /* ---- Type family ---------------------------------------------------- */
  --font-sans: "Mona Sans UG", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale: six steps, big jumps (nothing between 40 and 72) --- */
  --fs-label:     14px;                              /* labels, data, captions, nav */
  --fs-body:      16px;                              /* running text, notes */
  --fs-lead:      clamp(19px, 0.9vw + 10px, 22px);   /* sub, log entries, rows */
  --fs-statement: clamp(27px, 2.1vw + 10px, 40px);   /* statements, procedure */
  --fs-title:     clamp(38px, 4.4vw + 8px, 72px);    /* app name, closing line */
  --fs-display:   clamp(46px, 8.2vw, 120px);         /* hero only */

  /* ---- Width axis: two settings ---------------------------------------- */
  --wdth-display: 125%;  /* Expanded: display, statements, wordmark */
  --wdth-text:    100%;  /* Normal: everything you read in sentences */

  /* ---- Weights --------------------------------------------------------- */
  --w-display: 430;   /* in-between, never bold */
  --w-text:    400;
  --w-strong:  540;   /* wordmark, button */

  /* ---- Leading -------------------------------------------------------- */
  --lh-display:   1.0;
  --lh-title:     1.02;
  --lh-statement: 1.12;
  --lh-lead:      1.32;
  --lh-body:      1.5;
  --lh-label:     1.45;

  /* ---- Tracking, scaled to size (never past -0.03em, never positive) -- */
  --tr-display:   -0.03em;
  --tr-title:     -0.024em;
  --tr-statement: -0.018em;
  --tr-lead:      -0.008em;
  --tr-body:      -0.003em;
  --tr-label:      0;

  /* ---- Spacing: fixed scale, nothing off it --------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;
  --section: var(--s-10);      /* section air, top and bottom */

  /* ---- Grid & rails --------------------------------------------------- */
  --cols: 12;
  --gutter: var(--s-5);        /* 24 */
  --margin: 40px;              /* viewport edge to rail */
  --inset: var(--s-6);         /* rail to content, 32 */
  --measure: 62ch;             /* body measure */
  --sheet-max: 1520px;         /* rails stop widening here */
  --nav-h: 64px;
  --mark: 11px;                /* registration-mark arm length (both arms) */

  /* ---- Shape ---------------------------------------------------------- */
  --radius: 0;                 /* one radius: none */
  --hairline: 1px;

  /* ---- Motion: hover colour only -------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);  /* ease-out */
  --dur: 160ms;
}

@media (max-width: 760px) {
  :root {
    --cols: 4;
    --gutter: var(--s-4);      /* 16 */
    --margin: 14px;
    --inset: var(--s-4);       /* 16 */
    --nav-h: 56px;
    --section: var(--s-9);     /* 96 */
  }
}

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