/* ============================================================================================
   VaultWorth — the design tokens, in one place.

   WHY THIS FILE EXISTS. Until 2026-10-11 each of the eleven pages carried its own `:root` block
   and nine of the eleven had drifted apart, so there was no single place to change the palette.
   Every page now links this file and defines no colours of its own. One edit here re-skins the
   application.

   THE FOUR COLOUR JOBS, never swapped:
     neutral  — paper, surface, ink, muted. Most of the screen.
     teal     — INTERACTIVE ONLY. Links, the primary action, focus. Never status, never ornament.
     accent   — ATTENTION. Vera's voice, an open question, a section holding something unresolved.
     status   — STATE ONLY, and at most one loud thing per region.
   Plum is a fifth, narrow job: INTERNAL ONLY, and it never appears without the word beside it.

   TEAL IS ALWAYS A SHAPE, ACCENT IS ALWAYS A FIELD. Teal appears as a filled control or an
   underlined link; cornflower appears as a tint, a band or a dot — never a button, never
   underlined. The two are only 35 degrees apart, so the eye separates them by form rather than by
   hue. Break that and the palette stops working.
   ============================================================================================ */

:root{
  color-scheme: light;

  /* ---- the ground ---------------------------------------------------------------------- */
  --canvas:#F4F2EA;        /* paper. Warm, off the logo's own ground — deliberately not cream */
  --surface:#FFFDF9;       /* cards lift off the paper on a shadow, never on an outline */
  --sunken:#EBE8DD;        /* recessed: a chart's key, a computed block, a footer strip */
  --tint:#E2EFE8;

  /* ---- type ---------------------------------------------------------------------------- */
  --ink:#1E2A24;           /* warm near-black. Pure black on paper is a glare */
  --muted:#5C655E;
  --faint:#8E958C;

  /* ---- rules --------------------------------------------------------------------------- */
  --hair:#E3DFD2;
  --hair-soft:#EDEAE0;

  /* ---- the jobs ------------------------------------------------------------------------ */
  --primary:#2E7A68;       --primary-ink:#215A4D;      /* interactive ONLY */
  --acc:#4A8FBF;           --acc-ink:#346F99;          /* attention */
  --acc-tint:#E9F2F8;      --acc-deep:#28577A;
  --plum:#7A4A80;          --plum-tint:#F2EBF3;        /* internal only, always with the word */
  --plum-deep:#4E2D53;
  --ok:#3E8A63;            --warn:#B9862B;             /* state ONLY */
  --risk:#B5533F;

  /* STATUS PILLS need three things, not one. On the dark theme a pill was a light pastel on a dark
     tint and one colour did both jobs. On paper the wash is near-white, so the type has to be much
     darker than the dot. --*-ink is the TYPE, --*-wash is the GROUND, --ok/warn/risk stay the mark. */
  --ok-ink:#2A6B47;        --ok-wash:#E3F1E7;
  --warn-ink:#7A5A14;      --warn-wash:#F4EBD6;
  --risk-ink:#8E3B2A;      --risk-wash:#F6E3DE;

  /* ---- the logo's own sweep. Identity, never status. Rare on purpose. ------------------- */
  --sweep:linear-gradient(90deg,#5B2C5E 0%,#2E7A68 52%,#4A8FBF 100%);
  /* The same three hues, deepened, for anywhere the sweep carries WHITE TEXT. The logo's own
     cornflower end is 3.5:1 against white -- fine as a rule or an edge, under AA as a ground for
     small type. Identity keeps --sweep; controls use this. */
  --sweep-deep:linear-gradient(90deg,#5B2C5E 0%,#256A58 52%,#2E6B93 100%);

  /* ---- depth by lift, never by a border doing hierarchy's job -------------------------- */
  --lift:0 1px 2px rgba(28,36,32,.04), 0 10px 26px -18px rgba(28,36,32,.28);
  --lift-lg:0 2px 4px rgba(28,36,32,.04), 0 22px 48px -26px rgba(28,36,32,.32);

  /* ---- type families ------------------------------------------------------------------- */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','Segoe UI Mono','SF Mono',Menlo,Consolas,monospace;

  /* ============================================================================================
     LEGACY NAMES — the dark-theme vocabulary the eleven pages were written against.

     These are aliases, not a second palette. 1,363 rules across the app say var(--card) and
     var(--txt), and rewriting all of them in one pass would be a large diff with no way to tell a
     typo from a decision. Pointing the old names at the new values re-skins everything at once and
     leaves the rename as separate, reviewable work.

     NEW CODE USES THE NAMES ABOVE. Nothing new should reach for a legacy name.
     ============================================================================================ */
  --bg:var(--canvas);
  --panel:var(--surface);
  --card:var(--surface);
  --inset:var(--sunken);
  --line:var(--hair);
  --line-strong:#CFC8B6;
  --txt:var(--ink);
  --accent:var(--acc);          /* was decoration on dark; is ATTENTION now */
  --accent-2:var(--acc-ink);
  --cta:var(--primary);         /* was the button; still the button */
  --cta-d:var(--primary-ink);
  --good:var(--ok);
  --bad:var(--risk);
  --alert:var(--risk);
  --hot:var(--warn);
  --shadow:var(--lift-lg);
  --shadow-sm:var(--lift);

  /* Gold had no job in the new scheme — it was dark-theme decoration and the easter eggs.
     Kept as a warm tone that survives a light ground so nothing disappears. */
  --gold:#B08A2E; --gold-d:#8A6B1E; --gold-l:#D9B964;
}