/* =============================================================================
   Snjallt Þjónusta — design tokens (Dagsljós)
   -----------------------------------------------------------------------------
   Light is the default; dark is offered and repaired, never inferred from the
   clock (Iceland breaks that in both directions — 23:00 in June is daylight,
   11:00 in December is not).

   Every foreground/background pair below is verified against WCAG 2 sRGB by
   scripts/check-contrast.mjs, which fails the build. Do not hand-edit a value
   here without re-running it.

   Rules that are not obvious from the values:

   1. --border-strong is the ONLY token permitted on a control boundary
      (input, button, checkbox). --border and --divider are decorative and sit
      below 3:1 by design; using either as a control edge fails WCAG 1.4.11.
   2. Status --*-border tokens are tint outlines on a chip that ALSO carries a
      glyph and a word. They are decorative. They are not control edges either.
   3. Status is never colour alone. Every status colour ships with a glyph and
      a label. The four markers are staggered in lightness (min gap 0.024 in
      light, 0.028 in dark) so they stay separable under deuteranopia.
   4. Weight 300 is not used in either theme. Light gains apparent weight on
      dark grounds via irradiation and loses it on white.
   ============================================================================= */

:root {
  /* ---- grounds ------------------------------------------------------------ */
  --bg:            #FBFCFE;   /* page */
  --surface:       #F4F7FA;   /* card, raised */
  --sunk:          #EDF1F5;   /* inset: code, table head, disabled field */

  /* ---- interactive element fills ----------------------------------------- */
  --el:            #EFF2F5;
  --el-hover:      #E8ECEF;
  --el-active:     #DFE3E8;

  /* ---- lines -------------------------------------------------------------- */
  --divider:       #D9DFE5;   /* decorative: table rules, card edges */
  --border:        #C5CBD2;   /* decorative: paired with a fill */
  --border-strong: #858B93;   /* 3.03:1 on the darkest ground — CONTROL EDGES */

  /* ---- focus -------------------------------------------------------------- */
  /* Accent-coloured and offset, so it never has to out-contrast the fill it
     sits on. 6.64:1 against the worst light ground. */
  --focus:         #1F5D5E;
  --focus-width:   2px;
  --focus-offset:  2px;

  /* ---- ink ---------------------------------------------------------------- */
  --text:          #172029;   /* 16.04:1 */
  --text-2:        #4D5660;   /*  7.27:1 — labels, headers, all guidance copy */
  --text-meta:     #646D76;   /*  5.13:1 — timestamps, counts */

  /* ---- accent (brand teal, darkened for daylight) ------------------------- */
  --accent:        #447D7E;   /* solid fill; white label = 4.69:1 */
  --accent-hover:  #326E6F;
  --accent-text:   #1F5D5E;   /* 7.34:1 — links, accent type */
  --accent-tint:   #E6F3F3;
  --accent-border: #BAD8D8;   /* decorative */
  --on-accent:     #FFFFFF;

  /* ---- status: fault ------------------------------------------------------ */
  --fault-tint:    #FFEEED;
  --fault-border:  #FBC7C6;
  --fault-text:    #8C3F42;   /* 7.04 on bg · 6.44 on tint */
  --fault-mark:    #B4565A;   /* 4.63:1 */

  /* ---- status: attention -------------------------------------------------- */
  /* Hue moved off the brand's H91 — at 4.5:1 that yellow resolves to an
     olive-brown that reads as dirt on white. */
  --attn-tint:     #FFF0DE;
  --attn-border:   #F2CFA8;
  --attn-text:     #93652B;   /* 4.94 on bg · 4.54 on tint — do not nudge */
  --attn-mark:     #B8823A;   /* 3.25:1 */

  /* ---- status: ok --------------------------------------------------------- */
  --ok-tint:       #E8F7EB;
  --ok-border:     #BFE0C5;
  --ok-text:       #4A7956;   /* 4.92 on bg · 4.55 on tint — do not nudge */
  --ok-mark:       #5D9069;   /* 3.62:1 */

  /* ---- status: idle / awaiting -------------------------------------------- */
  /* "Bíður uppsetningar" lives here, NOT in fault. Tunnels are binding-gated
     until customer setup, so a never-seen device is normal, not broken. This
     one assignment is what prevents a fleet of grey units reading as a wall
     of red. */
  --idle-tint:     #EFF3F8;
  --idle-border:   #CFD7DF;
  --idle-text:     #666F7A;   /* 4.97 on bg · 4.57 on tint */
  --idle-mark:     #8D9399;   /* 3.02:1 */


  /* ---- chart series (categorical) --------------------------------------- */
  /* Two data series, not chrome. --accent is deliberately muted for calm UI
     (OKLCH chroma 0.06 — the dataviz validator calls it "reads gray"), which is
     right for a button and wrong for a line you must follow across a plot. These
     are validated as a categorical pair: normal-vision ΔE 25.9, deuteranopia
     15.9, tritanopia 16.7, both >= 3:1 on --surface. Status hues are RESERVED —
     a chart never borrows --fault/--attn for "series 3". */
  --chart-1:       #008A78;   /* tub temp   — primary series */
  --chart-2:       #7A3FB0;   /* flow temp  — secondary series */

  /* Modal scrim. The only non-token colour left in style.css was a
     hard-coded rgba(6,8,12,.72) backdrop; tokenised so both themes can tune
     it and nothing paints a literal. */
  --scrim: rgba(12, 16, 22, .5);

  /* ---- elevation ---------------------------------------------------------- */
  /* One shadow, for popovers and modals only. Never decoration. */
  --shadow: 0 1px 2px rgba(23,32,41,.06), 0 8px 24px -12px rgba(23,32,41,.18);

  /* ---- type --------------------------------------------------------------- */
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* JetBrains Mono is the target face (§4) but is not vendored yet — that
     lands with the WOFF2 subsetting in the follow-up plan. Until then the
     VENDORED DM Mono must come before any system fallback, or every device id,
     MAC and readout silently renders in the OS default monospace. */
  --mono: 'JetBrains Mono', 'DM Mono', ui-monospace, Menlo, monospace;

  --fs-micro:   12px;  /* uppercase section labels. Floor. Never below. */
  --fs-meta:    13px;
  --fs-body:    15px;
  --fs-lg:      17px;
  --fs-h3:      20px;
  --fs-h2:      24px;
  --fs-h1:      30px;
  --fs-readout: 32px;  /* mono, tabular — the number read aloud on the phone */

  --lh-tight:  1.2;
  --lh-body:   1.55;
  --lh-caps:   1.35;   /* uppercase Icelandic needs accent headroom */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  --track-caps: .07em; /* was .14–.26em; that shreds Icelandic at small sizes */

  /* ---- density ------------------------------------------------------------ */
  /* Switched on input modality, not viewport width — a touch laptop and a
     phone need the same targets, a desktop at 800px does not. */
  --ctl-h:  36px;
  --row-h:  40px;
  --tap-min: 24px;

  /* ---- space (4px base) --------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-14: 56px; --s-18: 72px;

  /* ---- radius ------------------------------------------------------------- */
  --r-sm:   6px;
  --r:     10px;
  --r-lg:  14px;
  --r-pill: 100px;

  /* ---- motion ------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur:      180ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ---- layout ------------------------------------------------------------- */
  --shell-max: 1440px;
  --measure:   68ch;
}

/* Coarse pointer: every control clears the 44px AAA target, with 48px giving
   headroom for cold or lightly gloved hands. */
@media (pointer: coarse) {
  :root {
    --ctl-h:   48px;
    --row-h:   56px;
    --fs-body: 16px;
    --tap-min: 44px;
  }
}

/* =============================================================================
   Dark — offered, not default. Only tokens are redefined here; no component
   ever declares a colour inside a media or [data-theme] block.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0C0E14;
    --surface:       #141822;
    --sunk:          #1A1F2B;

    --el:            #1A1F2B;
    --el-hover:      #212736;
    --el-active:     #28303F;

    /* Opaque, because white-alpha borders cannot invert — they vanish on
       light. This is the defect that made the old layout structureless. */
    --divider:       #242A36;
    --border:        #333B4A;
    --border-strong: #6E7789;   /* 3.66:1 on the worst dark ground */

    --focus:         #93B4B4;   /* 7.40:1 */

    --text:          #DDE3EC;
    --text-2:        #AAB3C4;   /* was #6B738A at 4.08:1 — the original defect */
    --text-meta:     #8A93A5;

    --accent:        #5E9899;
    --accent-hover:  #74AEAF;
    --accent-text:   #93B4B4;
    --accent-tint:   #16262A;
    --accent-border: #2E4A4C;
    --on-accent:     #08131A;

    --fault-tint:    #2A1A1C;
    --fault-border:  #5A3436;
    --fault-text:    #D58F8F;
    --fault-mark:    #C57878;

    --attn-tint:     #2A2318;
    --attn-border:   #5A4A2E;
    --attn-text:     #D6A771;
    --attn-mark:     #C39A63;

    --ok-tint:       #18261C;
    --ok-border:     #2F4A36;
    --ok-text:       #8ABA94;
    --ok-mark:       #75A27F;   /* darkened off #7BAA86: it was isoluminant
                                   with --attn-mark, so deuteranopes could not
                                   tell "ok" from "needs attention" */

    --idle-tint:     #1B2029;
    --idle-border:   #39414F;
    --idle-text:     #989FA7;
    --idle-mark:     #7E8794;

        --chart-1:       #33A88F;
    --chart-2:       #9A6FD0;
    --scrim: rgba(0, 0, 0, .66);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:            #0C0E14;
  --surface:       #141822;
  --sunk:          #1A1F2B;
  --el:            #1A1F2B;
  --el-hover:      #212736;
  --el-active:     #28303F;
  --divider:       #242A36;
  --border:        #333B4A;
  --border-strong: #6E7789;
  --focus:         #93B4B4;
  --text:          #DDE3EC;
  --text-2:        #AAB3C4;
  --text-meta:     #8A93A5;
  --accent:        #5E9899;
  --accent-hover:  #74AEAF;
  --accent-text:   #93B4B4;
  --accent-tint:   #16262A;
  --accent-border: #2E4A4C;
  --on-accent:     #08131A;
  --fault-tint:    #2A1A1C;
  --fault-border:  #5A3436;
  --fault-text:    #D58F8F;
  --fault-mark:    #C57878;
  --attn-tint:     #2A2318;
  --attn-border:   #5A4A2E;
  --attn-text:     #D6A771;
  --attn-mark:     #C39A63;
  --ok-tint:       #18261C;
  --ok-border:     #2F4A36;
  --ok-text:       #8ABA94;
  --ok-mark:       #75A27F;
  --idle-tint:     #1B2029;
  --idle-border:   #39414F;
  --idle-text:     #989FA7;
  --idle-mark:     #7E8794;
    --chart-1:       #33A88F;
  --chart-2:       #9A6FD0;
  --scrim: rgba(0, 0, 0, .66);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* =============================================================================
   Global floor — the rules that make the tokens load-bearing.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html { color-scheme: light dark }

body {
  background: var(--bg);           /* explicit: a transparent body borrows the host ground */
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Every focusable thing gets the same visible ring. There is exactly one. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

/* Uppercase Icelandic: lower the accents onto the cap so Á/Ó/Þ stop colliding
   with the line above. Without this, caps labels clip at any tight leading. */
.caps {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: var(--lh-caps);
  font-feature-settings: "case" 1;
  color: var(--text-2);
}

/* Digits that sit in columns, and every identifier read aloud. */
.mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1, "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}