/*
  Chart Paper design tokens.

  Every color / font-family / border-width / radius value used anywhere in
  site.css MUST come from a custom property defined here. site.css never
  contains a raw hex code — that is the restyle-safety contract for this
  design system: change the look by editing this file, not by hunting
  through components.

  Source: the approved "Chart Paper" mock (artik-v3-chartpaper.html).

  ---------------------------------------------------------------------
  TWO PALETTES, ONE SET OF NAMES
  ---------------------------------------------------------------------
  Each value exists once, as a --*-light / --*-dark pair. Three blocks
  below map a pair onto the token name site.css actually uses:

    :root                             light — the default
    @media (prefers-color-scheme:dark) dark — the visitor's OS preference,
                                      unless they explicitly chose light
    :root[data-theme="dark"]          dark — explicit choice, from the
                                      header toggle (stored in localStorage
                                      and re-applied before first paint by
                                      the bootstrap script in _Head.cshtml)

  The dark *mapping* appears twice because CSS can't apply one block from
  two conditions; the dark *values* are still defined in exactly one place,
  which is what matters when restyling. There is no explicit light block:
  the media query's :not([data-theme="light"]) already steps aside, leaving
  :root's light mapping in force.

  The dark palette is a deliberate second design, not an inversion of the
  first: same instrument read at night. Paper becomes a green-black drafting
  surface rather than a grey, and the pen inks are lifted until they carry on
  it — #2456a0 pen-blue is unreadable on a dark ground, so dark gets its own
  lighter blue at the same role.
*/

:root {
  /* ---- Light palette (exact hex values from the approved mock) ---- */
  --paper-light: #f6f8f4;   /* page background */
  --panel-light: #fdfefc;   /* card / panel surface, slightly brighter than paper */
  --grid-light: #d9e6d6;    /* fine rule, e.g. table row dividers */
  --rule-light: #c4d6c2;    /* card/panel borders */
  --line-light: #b9cbb8;    /* stronger structural border (frame-level) */
  /* Three text tones, spaced so each clears WCAG AA (4.5:1) on --paper-light and stays
     visibly a step apart: 12.4 : 1 / 7.1 : 1 / 4.6 : 1. The first draft of this palette put
     --faint at #8598a8, which measured 2.79:1 — below AA for every label, column header,
     subtitle and resting nav item in the app. Darkening it to clear AA closed the gap to
     --muted, so --muted moved down with it to keep three distinguishable tones rather than
     two. Hue and saturation are unchanged from the mock; only lightness moved. The dark
     palette already cleared AA and is untouched. */
  --ink-light: #1e3242;     /* primary text, headings, heavy rules */
  --muted-light: #465665;   /* secondary text */
  --faint-light: #5e7384;   /* tertiary / label text */
  --pen-blue-light: #2456a0; /* primary "recorder pen" accent — links, readings */
  --pen-red-light: #c9372c;  /* alarm / attention accent */
  --ok-light: #2e7d4f;       /* normal / good status */
  /* 4.6:1 on paper. Was #a8700d (3.94:1) — passable for large text, but the only place it
     appears is the 11px "watch" stamp, which is not large text. */
  --warn-light: #99660c;     /* watch / warning status */
  --input-bg-light: #fff;    /* field background */
  --on-ink-light: #fff;      /* text on an --ink-filled button */
  --hover-light: #eef4ec;    /* row hover tint on clickable ledger rows */
  /* The chart-paper ground: the millimeter grid body paints under everything.
     Sibling of --grid, carried separately so the ground's weight can be tuned
     without touching row dividers. Minor line, then the heavier major line. */
  --chart-minor-light: rgba(114, 148, 110, 0.10);
  --chart-major-light: rgba(114, 148, 110, 0.16);
  --shadow-card-light: 0 14px 40px rgba(30, 50, 66, 0.18);
  --map-tiles-light: none;   /* OSM's own tiles already suit a light page */

  /* ---- Dark palette (the same roles, designed for a dark ground) ---- */
  --paper-dark: #121a19;
  --panel-dark: #18211f;
  --grid-dark: #26332f;
  --rule-dark: #2f3d38;
  --line-dark: #3c4b45;
  --ink-dark: #e9f0ea;
  --muted-dark: #a7b8b1;
  --faint-dark: #7e8f89;
  --pen-blue-dark: #7fb0f0;
  --pen-red-dark: #f2705f;
  --ok-dark: #5ec489;
  --warn-dark: #dda43c;
  --input-bg-dark: #0d1414;  /* recessed below the panel — a field reads as a well */
  --on-ink-dark: #101a19;    /* --ink is near-white here, so button text goes dark */
  --hover-dark: #1f2a27;
  --chart-minor-dark: rgba(122, 158, 143, 0.07);
  --chart-major-dark: rgba(122, 158, 143, 0.12);
  --shadow-card-dark: 0 14px 40px rgba(0, 0, 0, 0.55);
  /* OSM serves only light tiles; this turns them into a dark basemap (Map.cshtml applies it to
     the tile pane alone, so the status markers keep their own colors). */
  --map-tiles-dark: invert(0.94) hue-rotate(180deg) saturate(0.75) brightness(1.05);

  /* ---- Active palette: light ---- */
  color-scheme: light;
  --paper: var(--paper-light);
  --panel: var(--panel-light);
  --grid: var(--grid-light);
  --rule: var(--rule-light);
  --line: var(--line-light);
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --faint: var(--faint-light);
  --pen-blue: var(--pen-blue-light);
  --pen-red: var(--pen-red-light);
  --ok: var(--ok-light);
  --warn: var(--warn-light);
  --input-bg: var(--input-bg-light);
  --on-ink: var(--on-ink-light);
  --hover: var(--hover-light);
  --chart-minor: var(--chart-minor-light);
  --chart-major: var(--chart-major-light);
  --shadow-card: var(--shadow-card-light);
  --map-tiles: var(--map-tiles-light);

  /* ---- Fonts (shared by both palettes) ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---- Type ramp (shared by both palettes) ----
     Five steps, each ~1.15x or wider than the one below it, so no two roles can be told
     apart only by someone measuring them. Before this existed site.css carried fifteen
     literal sizes, five of them inside a 2.5px band (10.5 / 11.5 / 12 / 12.5 / 13) doing
     five different jobs — a collection of values rather than a scale.

     In rem, not px, so the ramp answers the reader's browser font-size setting; the px in
     the comments are what each step renders at the default 16px root. Size is deliberately
     not asked to carry a role on its own — case, tracking, weight, family and color do the
     rest, which is why the emphasized figure in a stat strip is --fs-body at weight 600
     rather than a sixth step. */
  --fs-label: 0.6875rem;  /* 11px — uppercase tracked micro: stamps, tags, column heads,
                                    field labels */
  --fs-small: 0.8125rem;  /* 13px — small mono UI: nav, header, meta lines, numeric cells,
                                    form errors and notes */
  --fs-body: 0.9375rem;   /* 15px — base: prose, table cells, fields, buttons */
  --fs-title: 1.25rem;    /* 20px — the heading of any box: card, panel, form; plus the
                                    wordmark */
  --fs-display: 2rem;     /* 32px — the page's document title, and the signature reading */

  /* ---- Borders / radius (shared by both palettes) ---- */
  --border-thin: 1px;
  --border-thick: 1.5px;
  --border-heavy: 2px;
  --radius-sm: 2px;  /* status chip */
  --radius: 3px;     /* cards, panels, buttons, inputs */
}

/* The OS preference, for a visitor who hasn't chosen a side in this app. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: var(--paper-dark);
    --panel: var(--panel-dark);
    --grid: var(--grid-dark);
    --rule: var(--rule-dark);
    --line: var(--line-dark);
    --ink: var(--ink-dark);
    --muted: var(--muted-dark);
    --faint: var(--faint-dark);
    --pen-blue: var(--pen-blue-dark);
    --pen-red: var(--pen-red-dark);
    --ok: var(--ok-dark);
    --warn: var(--warn-dark);
    --input-bg: var(--input-bg-dark);
    --on-ink: var(--on-ink-dark);
    --hover: var(--hover-dark);
  --chart-minor: var(--chart-minor-dark);
  --chart-major: var(--chart-major-dark);
    --chart-minor: var(--chart-minor-dark);
    --chart-major: var(--chart-major-dark);
    --shadow-card: var(--shadow-card-dark);
    --map-tiles: var(--map-tiles-dark);
  }
}

/* An explicit choice from the header toggle wins over the OS preference. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: var(--paper-dark);
  --panel: var(--panel-dark);
  --grid: var(--grid-dark);
  --rule: var(--rule-dark);
  --line: var(--line-dark);
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --faint: var(--faint-dark);
  --pen-blue: var(--pen-blue-dark);
  --pen-red: var(--pen-red-dark);
  --ok: var(--ok-dark);
  --warn: var(--warn-dark);
  --input-bg: var(--input-bg-dark);
  --on-ink: var(--on-ink-dark);
  --hover: var(--hover-dark);
  --chart-minor: var(--chart-minor-dark);
  --chart-major: var(--chart-major-dark);
  --shadow-card: var(--shadow-card-dark);
  --map-tiles: var(--map-tiles-dark);
}