/*
 * THE DESIGN LANGUAGE. ONE FILE, TWO PALETTES, LOADED BY EVERY DESIGNED PAGE.
 *
 * A vendored file, not a build artifact (ADR-0004), and a file rather than an
 * inline style element so that `style-src 'self'` holds (ADR-0022).
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  THE PUBLIC PAGE AND THE WORKING APP ARE TWO DIFFERENT ROOMS.
 *
 *  :root         the LANDING page. Warm, dark, photograph-led. It is a
 *                momentary, passive thing and the mood is most of what it is
 *                for. The owner has never objected to it and it is unchanged.
 *
 *  body.shell    the AUTHENTICATED app, which is TWO SURFACES, not one:
 *
 *                  THE FRAME    the top bar and the sidebar. DARK, with light
 *                               ink on it. The owner's correction was exact:
 *                               the frame was never the problem, its CONTRAST
 *                               was.
 *                  THE CONTENT  the cards a person reads and edits trip data
 *                               on. WHITE at 15% transparency, so the
 *                               photograph shows through, with DARK ink.
 *
 *  Two passes got this wrong in opposite directions — one made everything dark,
 *  the next made everything light. Neither was what was asked for. The frame
 *  and the content are different rooms with different jobs, and they get
 *  different palettes.
 *
 *  Both palettes use THE SAME TOKEN NAMES, so shell.css and landing.css each
 *  ask for `--panel` and each get the one that belongs to their room. Changing
 *  a colour is changing a value here; it is not a rewrite of either stylesheet.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ─── THE CONTRAST GUARANTEE, AND HOW THE TWO ROOMS DIFFER ──────────────────
 *
 *  Both palettes put text on a TRANSLUCENT panel over an UNKNOWN photograph, so
 *  both are computed against the worst photograph that panel can face — and the
 *  worst case is the opposite one in each room:
 *
 *      DARK frame, light ink   → worst photograph is PURE WHITE
 *      WHITE card, dark ink    → worst photograph is PURE BLACK
 *
 *  THAT SECOND ONE IS COUNTER-INTUITIVE AND IS WORTH STATING TWICE. A bright
 *  photograph makes a translucent white card BRIGHTER, which makes dark text on
 *  it EASIER to read. It is a dark photograph that pulls the card down toward
 *  the ink and squeezes the ratio. Computed both ways: at 15% transparency the
 *  body text is 16.61:1 over a white photograph and 11.74:1 over a black one,
 *  so black is the case that binds.
 *
 *  Every number below is computed that way, with the scrim over the photograph
 *  ignored entirely, as though it were not there. tests/shell_test.php and
 *  tests/landing_test.php recompute all of them from these declarations.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 *  THE LANDING PAGE — warm, dark, unchanged.
 *
 *  Panels are `rgba(26, 20, 16, α)` over a PURE WHITE photograph:
 *      α = 0.72 → rgb(90, 86, 83)    --ink 6.76:1   --ink-muted 5.47:1
 *      α = 0.86 → rgb(58, 53, 49)    --ink 11.25:1  --accent 5.41:1
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /*
   * Warm and slightly smoky. The fallback when the photo folder is empty, and
   * the colour behind every photograph while it loads. NEVER WHITE here: a
   * flash of white on a dark photo page is the harshest thing it can do.
   */
  --ground: #241d18;
  --ground-glow: #3a2c22;

  --panel: rgba(26, 20, 16, 0.72);
  --panel-work: rgba(26, 20, 16, 0.86);
  --field: rgba(0, 0, 0, 0.25);

  --ink: #faf6ef;
  --ink-muted: #e8ded0;
  --ink-dim: #cdc2b0;

  --accent: #c9a87c;
  --accent-ink: #17161a;
  --accent-hover: #dcc09a;

  --caution: #f2b56a;
  --alarm: #f0a08a;
  --affirm: #9fd0a0;

  --edge: rgba(250, 246, 239, 0.10);
  --edge-strong: rgba(250, 246, 239, 0.18);

  --panel-radius: 6px;
  --panel-edge: 1px solid var(--edge);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  THE AUTHENTICATED APP — light, white, clean.
 *
 *  Panels are `rgba(255, 255, 255, α)` over a PURE BLACK photograph, which is
 *  the worst case for dark text on a white card:
 *
 *      α = 0.90 → rgb(230, 230, 230)   --ink 13.25:1  --ink-muted 6.91:1
 *                                      --accent 4.89:1
 *      α = 0.94 → rgb(240, 240, 240)   --ink 14.54:1  --ink-muted 7.58:1
 *                                      --accent 5.36:1  --ink-dim 5.04:1
 *
 *  --ink-dim is the tight one: 5.04:1 on the working card and 4.60:1 on the
 *  lighter panel. Both clear AA, but 4.60 is the THINNEST MARGIN IN THE WHOLE
 *  DESIGN — so if a panel is ever made more transparent, that is the number
 *  that breaks first. The suite reports it by name for exactly that reason.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 *  THE AUTHENTICATED APP.
 *
 *  ⚠ THESE ARE FALLBACK VALUES. The live palette comes from /theme.css, which
 *  is generated from the active saved theme and loaded AFTER this file — the
 *  owner edits it at /admin/theme without a code change (ADR-0035). These
 *  declarations are what the app looks like if that stylesheet is ever
 *  unreachable, and they are generated from the same registry
 *  (src/Support/Theme.php), so the two cannot drift. A test asserts it.
 *
 *  THE FRAME, dark: `rgba(26, 20, 16, 0.85)` over a PURE WHITE photograph
 *  flattens to rgb(60, 55, 52) —
 *      --frame-ink 10.50:1   --frame-ink-muted 7.60:1   --frame-accent 6.16:1
 *
 *  THE CONTENT, white at 15% transparency: `rgba(255, 255, 255, 0.85)` over a
 *  PURE BLACK photograph flattens to rgb(217, 217, 217) —
 *      --ink 11.74:1   --ink-muted 6.98:1   --ink-dim 5.45:1   --accent 5.62:1
 *
 *  WHY 15% AND NOT 10% OR 20%. The owner asked for 10–20% transparency and for
 *  a value in that band to be chosen and justified. All three were computed
 *  against a black photograph: at 10% the backdrop is barely present; at 20%
 *  the quietest ink falls to 5.05:1 and the margin starts thinning; 15% sits in
 *  the middle with the photograph clearly visible and the worst pair still at
 *  5.45:1, a full point above AA. It is the most transparency that still leaves
 *  room to be wrong about a photograph.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.shell {
  --frame: rgba(26, 20, 16, 0.85);
  --frame-ink: #f7f2ea;
  --frame-ink-muted: #d9cfc0;
  --frame-accent: #d9b784;
  --frame-current: rgba(217, 183, 132, 0.1);
  --frame-edge: rgba(250, 246, 239, 0.14);
  --panel-work: rgba(255, 255, 255, 0.85);
  --panel: rgba(255, 255, 255, 0.78);
  --field: rgba(36, 29, 24, 0.05);
  --ink: #241d18;
  --ink-muted: #4d4137;
  --ink-dim: #5c5148;
  --accent: #6b4a2c;
  --accent-ink: #ffffff;
  --accent-hover: #4f3620;
  --caution: #7a4600;
  --alarm: #922316;
  --affirm: #1a5c31;
  --edge: rgba(36, 29, 24, 0.12);
  --edge-strong: rgba(36, 29, 24, 0.22);
  --ground: #e9e2d6;
  --ground-glow: #fbf8f3;
  --scrim: rgba(255, 253, 249, 0.42);

  --panel-radius: 6px;
  --panel-edge: 1px solid var(--edge-strong);
}