/* RA Converter — THE PALETTE, one copy for every page that carries the app's skin.

   Until 2026-09-16 this lived as EIGHT copies of :root, one per page (index, classic, capture,
   tools, login, subscribe, privacy, run). They were measured and had not drifted, but the copies
   were the standing risk: a token fixed in one page was drift in the other seven.

   THE LOOK, since 2026-09-16 (CLAUDE.md item 81): a ROYAL MASTHEAD over calm content, a MIDNIGHT
   NAVY dark theme, and the drafting grid redrawn as GRAPH PAPER. Chosen by Richard from a palette
   study against the old slate frame, whose complaint was "very blue and dark":

     - one royal band carries the brand: the app's brand bar, the drawer head, every page's title
       block. Everything that sits on it takes the .ra-band class below.
     - every OTHER bar now follows the theme. Until this change the bars were constants that stayed
       dark in both themes, which is why light mode read as a white sheet in a navy frame (35% of a
       phone screen). The --bar-* tokens therefore have light values now; they did not before.
     - the ground is graph paper: faint green lines on a pale green-white in light, on the navy
       surface in dark. It flips, so --on-ground flips with it.

   Every token any page uses is defined here, even where only one page reads it. A page that needs
   a different value overrides it in its own <style>, which comes after this file.

   Loaded with a plain <link> BEFORE each page's <style>. It is on the gate's PUBLIC_PATHS (login,
   subscribe and privacy are read signed-out), and sw.js precaches it CACHE-FIRST, so any change
   here needs sw.js VERSION bumped.

   p.html does NOT load it (single-theme on purpose). fieldbook.js and diagram-parser.js inject
   their own CSS.

   Change a colour here and run tools/theme-sweep.js on every page that links this file. */

/* ============================== DARK — midnight navy ==============================
   Lifted one notch on 2026-09-18 ("slightly dark"): every navy surface is ~10% lighter, the
   card still sits ~1.14:1 off the pane and every ink token still clears its floor. Only the two
   divider tokens had to move with it (#5B6C98 fell to 2.86:1 on the lighter card). */
:root{
  /* ---- Ink and the recessed surface ------------------------------------------------------- */
  /* Native controls follow the theme: scrollbars, date pickers, a select's open list. Without it
     the dark theme drew a white scrollbar across the navy table. */
  color-scheme:dark;
  --paper:#E6EBF5;        /* the INK token, not a literal white — every use is a foreground */
  --muted:#9CA9C4;        /* 6.95:1 on a card, 7.84:1 on the pane */
  --blue:#B4C4FF;         /* links and ghost buttons, 9.60:1 on a card */
  --royal-deep:#0E1729;   /* RECESSED: input fills, tool cards — darker than the card they sit in */
  --royal:#1D3C99;        /* a lit toggle with white text on it, 9.73:1 */
  --royal-band:#1D3C99;
  --r:10px;               /* one dial for every rounded corner in the app */

  /* ---- Green: the colour of "this changes your data" --------------------------------------- */
  --green:#1E8449;        /* white text on it 4.72:1 */
  --btn-hover:#26A15A;
  /* The keyline on a green button. A CONSTANT: the fill under it is green in both themes, so a
     flipping token is wrong for it by construction (it measured 1.31:1 when it flipped). */
  --btn-edge:rgba(245,247,250,0.75);
  /* The green used as TEXT on a card. The palette green is too dark for that on navy. */
  --brand-accent:#33C070; /* 6.97:1 on a card */

  /* ---- Surfaces ------------------------------------------------------------------------------ */
  --surface:#121C33;      /* the panes */
  --card:#1A2742;         /* section cards, the drawer */
  /* The card EDGE does the separating in this theme. The navy card sits only ~1.13:1 off the
     navy ground, so unlike the old slate cards the fill cannot carry it. */
  --card-edge:rgba(180,196,255,0.46);
  --card-seam:#6577A0;    /* a divider inside a card, 3.33:1 */
  --thead:#1A2742;        /* sticky table head, a step up from the pane */
  --line:rgba(156,169,196,0.16);   /* hairlines: rhythm, not division */
  --stripe:rgba(120,150,220,0.05);
  --rowhover:rgba(51,192,112,0.12);
  /* The pane seam. One constant clears 3:1 against both pane surfaces: 4.07:1 on the navy pane,
     4.56:1 on white. */
  --seam:#66759F;

  /* ---- The bars (every bar that is NOT the royal band) --------------------------------------
     These FLIP now. Which surface a bar gets says what it is:
       --hdr       a flat bar: systems bar, capture bar, capture's system line
       --bar-deep  the frame at the foot: status strip, tab bar
       --bar-head  the head of a content surface: pane heads, section header bands */
  --hdr:#16213A;
  --bar-deep:#16213A;
  --bar-head:#1A2742;
  --bar-text:#E6EBF5;
  --bar-muted:#9CA9C4;
  --bar-accent:#33C070;   /* a confirming word on a bar, and the From -> To arrow */
  --bar-title:#B4C4FF;    /* a pane's own name, and the lit tab */
  --bar-line:#6577A0;     /* 3.33:1 on the lightest bar it is drawn on */
  --bar-hover:rgba(180,196,255,0.10);

  /* The section header band on the sectioned pages: a --bar-head surface. */
  --hdr-text:#B4C4FF;
  --hdr-no:#9CA9C4;
  --hdr-rule:rgba(180,196,255,0.22);
  --sec-no:#8AA6FF;       /* a section number on a card, 7.02:1 */

  /* ---- The royal band ------------------------------------------------------------------------
     Read only through .ra-band below. Darker in this theme than in light so it does not glare. */
  --brand-bar:#1D3C99;
  --brand-text:#FFFFFF;
  --brand-muted:#C9D5FF;  /* 6.69:1 */
  --brand-accent-bar:#86E5AE;   /* the RA in the wordmark, 6.41:1 */
  --brand-line:rgba(255,255,255,0.5);   /* 3:1 on the lighter light-theme band */
  --brand-rule:#17327F;
  --brand-hover:rgba(255,255,255,0.14);

  /* ---- Warnings ------------------------------------------------------------------------------ */
  --warn:#F0C24A;
  --warn-ink:#F0C24A;
  /* GPS fix quality on RA Capture's bars. Tokens, because those bars flip now. */
  --acc-good:#33C070;
  --acc-fair:#F0C24A;
  --acc-poor:#E0705A;     /* 5.48:1 on a bar */

  /* ---- Graph paper: the ground ------------------------------------------------------------ */
  --bg-fill:#121C33;
  --grid:rgba(60,199,122,0.10);
  --grid-major:rgba(60,199,122,0.20);
  /* Real graph paper (2026-09-19): fine squares with a heavier line every fifth, as a drafting
     sheet is ruled. One pattern for every page, so the ground cannot differ between them. Each
     page's ground reads these two rather than writing its own gradients. */
  --paper-grid:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  --paper-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
  /* Neutral, not green (2026-09-16: the empty table read better in white). The grid, the dashed
     edge and the links keep the green, so the ground still reads as graph paper. */
  --on-ground:#C3CCDF;          /* 11.5:1 */
  --on-ground-link:#6FD89D;     /* 10.58:1 */
  --on-ground-head:#FFFFFF;     /* the empty state's heading */
  --on-ground-edge:#3F8A62;     /* the dashed drop target, 4.43:1 */

  /* ---- The tool groups (index.html's Tools drawer) -------------------------------------------
     The app's OWN colours since 2026-09-18 ("more in line with the overall app"), replacing the
     teal, terracotta and purple of item 62: green changes your data (as on every green button),
     royal is the brand, amber is the app's "check this" colour, and slate is paperwork. Blue can
     sit here now because the cards are navy rather than the royal that made a blue vanish. */
  --tool-change:#33C070;
  --tool-bring:#8AA6FF;
  --tool-measure:#F0C24A;
  --tool-docs:#9CA9C4;
}

/* ============================== LIGHT — royal masthead ============================== */
:root[data-theme="light"]{
  color-scheme:light;
  /* MIST (2026-09-19, Richard's pick of four: "very white and bright"), then one step darker the
     same day ("still a bit light"). Every surface stepped
     off pure white into a cool grey-blue, the tinted heads and bars a notch deeper, the ground a
     soft green-grey. Chosen over warm paper and a mid-tone dim; the royal band is unchanged. */
  --paper:#14203D;
  --muted:#56627C;              /* 5.45:1 on a tinted head */
  --blue:#2145AE;
  --royal-deep:#F7F9FC;
  --royal:#2145AE;
  --royal-band:#2145AE;

  --green:#186B3B;
  --btn-hover:#145C32;
  --brand-accent:#186B3B;

  --surface:#EDF1F7;
  --card:#F2F5F9;
  /* 0.50: at 0.22 a card's edge measured 1.59:1 and the cards had no boundary in this theme,
     and 0.47 fell to 2.96:1 once the ink went from #0E1A3C to #14203D. */
  --card-edge:rgba(20,32,61,0.50);
  --card-seam:#66759F;
  --thead:#D6DEEB;
  --line:rgba(20,32,61,0.12);
  --stripe:rgba(33,69,174,0.05);
  --rowhover:rgba(24,107,59,0.10);

  --hdr:#E6EBF3;
  --bar-deep:#DFE5EE;
  --bar-head:#D9E0EC;
  --bar-text:#14203D;
  --bar-muted:#56627C;
  --bar-accent:#186B3B;
  --bar-title:#2145AE;          /* 7.41:1 on a tinted head */
  --bar-line:#6E7B9C;           /* set by the TINTED heads, the lightest surface it must clear */
  --bar-hover:rgba(33,69,174,0.07);

  --hdr-text:#2145AE;
  --hdr-no:#56627C;
  --hdr-rule:rgba(33,69,174,0.22);
  --sec-no:#2145AE;

  --brand-bar:#2145AE;
  --brand-muted:#D6DEFA;        /* 6.21:1 */
  --brand-rule:#1A3890;

  --warn:#8A5A00;
  --warn-ink:#8A5A00;
  --acc-good:#18794A;
  --acc-fair:#8A5A00;
  --acc-poor:#B42318;

  --bg-fill:#E4EAE7;
  --grid:rgba(30,132,73,0.09);
  --grid-major:rgba(30,132,73,0.20);
  --on-ground:#3C4A68;          /* 8.48:1; the light theme's equivalent of the dark theme's white */
  --on-ground-link:#1B5E3B;
  --on-ground-head:#14203D;
  --on-ground-edge:#4E8F6E;     /* 3.67:1 */

  --tool-change:#186B3B;
  --tool-bring:#2145AE;
  --tool-measure:#8A5A00;
  --tool-docs:#56627C;
}

/* ============================== The royal band ==============================
   A surface that IS the band. It re-points the ink and surface tokens at the band's own values,
   so everything drawn on it — a wordmark, a ghost button, a theme toggle, a close glyph — is right
   without a single rule of its own. That is the whole reason it is a class and not a colour:
   the old bars needed a parallel set of --bar-* constants and three recorded bugs to get there.

   The surface tokens (--card, --hdr, --bar-*, --royal-deep) are re-pointed too, so a title block
   painted with --card, a brand bar painted with --bar-deep and a small button filled with
   --royal-deep all turn royal with no change to their own CSS. --royal-deep had to be included:
   left alone it stayed white in the light theme while --paper went white, and RA Run's theme
   button measured 1.00:1. */
.ra-band{
  --paper:var(--brand-text);
  --muted:var(--brand-muted);
  --blue:var(--brand-muted);
  --brand-accent:var(--brand-accent-bar);
  --sec-no:var(--brand-muted);
  --card:var(--brand-bar);
  --royal-deep:var(--brand-bar);
  --card-edge:var(--brand-line);
  --line:var(--brand-line);
  --hdr:var(--brand-bar);
  --bar-deep:var(--brand-bar);
  --bar-head:var(--brand-bar);
  --bar-text:var(--brand-text);
  --bar-muted:var(--brand-muted);
  --bar-accent:var(--brand-accent-bar);
  --bar-title:var(--brand-text);
  --bar-line:var(--brand-rule);
  --bar-hover:var(--brand-hover);
  color:var(--brand-text);
  background-color:var(--brand-bar);
}