/* systemet — nuet design system. Applied through ADR-014.
   Tokens, type and the fönsterband grid. Pulled into consumers as a git subtree (README → Using it); edit only here.
   Spec: Notion → Brand & Naming (ADR-011 the ×3 dot, ADR-012 fönsterband grid, ADR-013 this repo).
   The token blocks below are the only place a value lives: systemet.js measures them, check/lint.sh reads them, the specimen displays them. */

/* fonts — self-hosted, OFL 1.1, licences in fonts/ */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/familjen-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/familjen-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"Fira Code";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fira-code-400.woff2) format("woff2")}

/* tokens — colour (Brand & Naming → Colour, 2026-09-17) */
:root{
  --paper:#F3F1EA;    /* background; the off-white is the beige */
  --ink:#141414;      /* text, hairline rules */
  --grey:#6B6A64;     /* muted text */
  --grey2:#8D8C85;    /* hatching, secondary muted */
  --code:#E9E7DF;     /* code block ground */
  --hair:#DAD8D0;     /* hairlines, rings */
  --klein:#002FA7;    /* the dot, tics, the one filled button; the only colour without a reason */
  --kelly:#4CBB17;    /* state: current, healthy, activity; takes dark text */
  --kelly-ink:#0F2A05;
  --cad:#E30022;      /* state: stale, failed, alert; takes white text */
  --sans:"Familjen Grotesk",system-ui,sans-serif;
  --mono:"Fira Code",ui-monospace,Menlo,monospace;
  --dotc:var(--klein);--ringc:var(--klein);--corec:var(--paper);   /* nuet.svg reads these. On product surfaces the dot stays Klein in both themes (ADR-014); paper marks are for tiles */
  color-scheme:light}
/* dark values exist for product surfaces; opt in per page with data-theme="dark". nuet.dev stays paper. */
[data-theme="dark"]{--paper:#141414;--ink:#F3F1EA;--grey:#8D8C85;--grey2:#6B6A64;--code:#1F1F1F;--hair:#2A2A2A;--klein:#4A76E8;color-scheme:dark}

/* tokens — grid (ADR-012). 1M = 3 px on screen; every other length is a count of M. An ADR that moves a value changes one number here.
   --type names the type styles: systemet.js measures each one's baseline, lint checks each one's size against its name. */
:root{--m:3px;--bl:calc(7*var(--m));--st:calc(42*var(--m));--sill:calc(3*var(--m));--win:calc(18*var(--m));--pier:calc(6*var(--m));--mg:calc(24*var(--m));
  --type:h30 b14 s14 m11 c14}
@media(max-width:699px){:root{--win:calc(12*var(--m));--mg:calc(12*var(--m))}}   /* phone: narrower windows and margins */

/* base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:500 14px/var(--bl) var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* type — the styles named in --type, each named by its size in px; three sizes only. h30 sits on two baselines, the rest on one.
   Each style sits on the baseline grid via --sh-*: systemet.js measures the real baseline after fonts load and sets it;
   the fallbacks are the values measured in Chrome and are what Paper uses. */
.h30{font:600 30px/calc(2*var(--bl)) var(--sans);letter-spacing:-.024em;position:relative;top:var(--sh-h30,9.0px);margin:0}
.b14{font:500 14px/var(--bl) var(--sans);position:relative;top:var(--sh-b14,4.9px);margin:0}
.s14{font:600 14px/var(--bl) var(--sans);position:relative;top:var(--sh-s14,4.9px);margin:0}
.m11{font:400 11px/var(--bl) var(--mono);position:relative;top:var(--sh-m11,6.8px);margin:0}
.c14{font:400 14px/var(--bl) var(--mono);position:relative;top:var(--sh-c14,5.8px);margin:0;white-space:pre}
.grey{color:var(--grey)} .k{color:var(--klein)}

/* fönsterband — windows. A .fac (façade) is a row of windows between the margins; children span whole windows. */
.fac{display:grid;grid-template-columns:repeat(auto-fill,var(--win));column-gap:var(--pier);margin:0 var(--mg);position:relative}
.fac>*{grid-column:1/-1}
/* a block spans whole windows and starts on window 1, on its own row. Add .flow to let blocks sit side by side (stats 3 × 3, columns 7 + 7, footer 2 × 7).
   Add .storey to make a block start at the top of a storey, or on its second baseline under a tic (systemet.js moves it); a section is padded to end on one. */
.w2{grid-column:1/span 2}.w3{grid-column:1/span 3}.w4{grid-column:1/span 4}.w6{grid-column:1/span 6}.w7{grid-column:1/span 7}.w8{grid-column:1/span 8}.w10{grid-column:1/span 10}
.flow{grid-column-start:auto} .tic+.flow{grid-column-start:1}   /* nothing sits beside a tic: the first flow block after it starts a new row */
.tic{grid-column:1/span 6}                                   /* section tic: nu / <thing>, 11 mono in Klein */
.ground{background:var(--code);margin-left:calc(-1*var(--pier));padding:var(--bl) 0 var(--bl) var(--pier)}   /* a background reaches one pier into the margin; its text still starts on the window edge */
section,header,footer{position:relative}
.gap{height:var(--bl)}

/* header — one storey: wordmark in window 1 on baseline 2, navigation from window 9 (7 on tablet, 4 on phone) */
header{height:var(--st)} header .fac{height:100%;align-content:start;align-items:start;padding-top:calc(2*var(--bl))}
.wm{grid-column:1/span 2;height:var(--bl);position:relative;top:2px} .wm svg{display:block;width:59px;height:19px}
header .fac>nav{grid-column:9/-1;display:flex;gap:var(--pier)}
nav a{color:var(--grey)} nav a:hover{color:var(--ink)}
footer{padding-top:var(--st)}                               /* a storey of air before the footer */
footer .fac>*{grid-column:auto/span 7}
@media(max-width:1179px){header .fac>nav{grid-column:7/-1} .w7,.w8,.w10{grid-column:1/span 8}}   /* tablet: reading columns stack at 8 windows */
@media(max-width:699px){header .fac>nav{grid-column:4/-1} nav a:not(:last-child){display:none} .w2,.w3,.w4,.w6,.w7,.w8,.w10,.tic,footer .fac>*{grid-column:1/-1} .ground{margin-right:calc(-1*var(--mg))}}

/* marks — Dot geometry. The logomark is a ring 3:1; 6M on screen (radius 3M, core 1M). */
.mark{--size:calc(6*var(--m));display:inline-block;width:var(--size);height:var(--size);border-radius:50%;flex:none;vertical-align:-5px;   /* inline in 14/21 text it must stay inside the line box */
  background:radial-gradient(circle,var(--paper) 0 33.333%,var(--klein) calc(33.333% + .5px))}
.mark.solid{background:var(--klein)}                       /* below 32 px in tiles */
.dot{display:inline-block;width:4.66px;height:4.66px;border-radius:50%;background:var(--klein);margin-left:1.49px;vertical-align:0}   /* punctuation dot after .h30: 1.25 × stem, gap 0.40 × stem, on the baseline */
.state{display:inline-block;width:.5ex;height:.5ex;border-radius:50%;background:var(--kelly);vertical-align:.3ex;margin-left:var(--sill)}   /* status dot: 0.5 × x-height, centred on the x-height */
.state.bad{background:var(--cad)}
/* the beat (ADR-012): the mark swells to 1.22× over 0.9 s; a Klein hairline ripple leaves it, 3M → 9M, fading over 1.8 s */
.mark.beat{animation:beat .9s cubic-bezier(.2,.7,.2,1)} @keyframes beat{30%{transform:scale(1.22)}}
.ripple{position:absolute;width:calc(6*var(--m));height:calc(6*var(--m));margin:calc(-3*var(--m)) 0 0 calc(-3*var(--m));border:1px solid var(--klein);border-radius:50%;opacity:0;pointer-events:none}
.ripple.go{animation:ripple 1.8s cubic-bezier(.2,.7,.2,1)} @keyframes ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
@media(prefers-reduced-motion:reduce){.mark.beat,.ripple.go{animation:none}}

/* construction overlay — review only, never shipped as visible: baselines, sills, windows in cadmium. Toggle with #grid. */
.ov{display:none;position:absolute;inset:0;pointer-events:none;z-index:9;
  background:
   repeating-linear-gradient(to bottom,rgba(227,0,34,.28) 0 var(--sill),transparent var(--sill) var(--st)),
   repeating-linear-gradient(to bottom,transparent 0 calc(var(--bl) - 1px),rgba(227,0,34,.18) calc(var(--bl) - 1px) var(--bl))}
.ov .w{position:absolute;top:0;bottom:0;left:var(--mg);right:var(--mg);background:repeating-linear-gradient(to right,rgba(227,0,34,.06) 0 var(--win),transparent var(--win) calc(var(--win) + var(--pier)))}
body.g .ov{display:block}