/* Colour — near-monochrome ledger palette with one vivid indigo.
   Base values come straight from the brand reference; semantic aliases below
   map them onto product surfaces. Indigo appears ONLY on things you act on:
   filled buttons, links, active nav, icon strokes. Never as a large field. */
:root{
  /* ---- Base palette ---- */
  --color-indigo-ink:#533afd;
  --color-indigo-hover:#7389ff;
  --color-midnight-ink:#061b31;
  --color-slate:#64748d;
  --color-steel:#50617a;
  --color-smoke:#839bc8;
  --color-pure-white:#ffffff;
  --color-mist:#f8fafd;
  --color-frost:#e5edf5;
  --color-lavender-border:#b9b9f9;
  --color-lilac-border:#d6d9fc;
  --color-periwinkle-wash:#e8e9ff;
  --color-deep-violet:#182659;
  --color-amethyst-edge:#7f71e6;

  /* ---- Surfaces (depth is tint progression, never shadow) ---- */
  --surface-canvas:#ffffff;
  --surface-band:#f8fafd;
  --surface-frosted-card:#e5edf5;
  --surface-lavender-card:#e8e9ff;
  --surface-indigo-surface:#533afd;

  /* ---- Text ---- */
  --text-primary:var(--color-midnight-ink);
  --text-secondary:var(--color-slate);
  --text-muted:var(--color-steel);
  --text-decor:var(--color-smoke);
  --text-on-accent:var(--color-pure-white);
  --text-link:var(--color-indigo-ink);

  /* ---- Borders ---- */
  --border-default:var(--color-frost);
  /* One step quieter than default, for rules INSIDE an already-bordered region:
     the rows of a nested table, a sub-board, a list within a card. At the same
     weight as its frame, an inner rule competes with the frame and the nesting
     stops reading. */
  --border-subtle:#e6ebf5; /* solid fallback declared first */
  --border-subtle:color-mix(in srgb, var(--color-frost) 55%, transparent);
  --border-lavender:var(--color-lavender-border);
  --border-lilac:var(--color-lilac-border);
  --border-amethyst:var(--color-amethyst-edge);
  --border-deep:var(--color-deep-violet);

  /* ---- Action ---- */
  --action:var(--color-indigo-ink);
  --action-hover:var(--color-indigo-hover);
  --action-wash:var(--color-periwinkle-wash);
  --focus-ring:rgba(83,58,253,0.28);

  /* ---- Operational status ----
     An INTENTIONAL ADDITION to the reference palette (see readme.md). A WMS has
     to say "expired", "short-picked", "over-received" on a row; the monochrome
     + indigo set has no vocabulary for it. Kept low-chroma and cool so it reads
     as ledger annotation, not consumer-app colour, and used ONLY inside status
     tags, never on buttons, surfaces or headings. */
  --status-ok:#0f7a5a;
  --status-ok-wash:#e8f4f0;
  --status-warn:#8a5a00;
  --status-warn-wash:#fbf2e2;
  --status-critical:#c0362c;
  --status-critical-hover:#a32c23;
  --status-critical-wash:#fbeae8;
  --status-critical-wash-hover:#f5d8d4;
  --status-neutral:var(--color-steel);
  --status-neutral-wash:var(--color-frost);

  /* ---- Glass and scrim ----
     The frosted fills were literal rgba(255,255,255,…) in eight components,
     which is exactly what makes a design system undarkenable: a translucent
     WHITE over a dark canvas produces grey fog, not glass. Named here so the
     theme swap reaches them. */
  --glass-fill:rgba(255,255,255,0.72);
  /* Glass laid over IMAGERY, where show-through is the whole point — the photo
     has to stay legible behind the panel. Distinct from -strong, which is a
     nav/veil surface where legibility of the CONTENT outranks show-through. */
  --glass-fill-photo:rgba(255,255,255,0.82);
  --glass-fill-strong:rgba(255,255,255,0.92);
  --glass-border:rgba(255,255,255,0.60);
  --glass-blur:18px;
  --scrim:rgba(6,27,49,0.28);
  --scrim-soft:rgba(6,27,49,0.18);
  /* Heavier: a veil laid over a PHOTOGRAPH, which has to survive whatever is
     behind it. Does not lighten in dark mode — a photo is a photo. */
  --scrim-deep:rgba(6,27,49,0.62);

  /* Ink laid ON a deep indigo field. These do NOT flip with the theme — a deep
     field is deep in both modes, so its text stays white either way. */
  --on-deep-strong:rgba(255,255,255,0.92);
  --on-deep:rgba(255,255,255,0.82);
  --on-deep-mute:rgba(255,255,255,0.72);
  --on-deep-line:rgba(255,255,255,0.16);
}

/* ---------------------------------------------------------------------------
   DARK

   Set data-theme="dark" on <html>, matching the product's own convention. Only
   the SEMANTIC layer is remapped; the base palette above never changes, so a
   value like --color-indigo-ink still means the same ink in both themes.

   Three decisions worth knowing:

   1. The canvas is the brand's own midnight, not black. #061b31 is already in
      the palette as the text colour; using it as the dark ground keeps the
      system inside its own cool navy rather than inventing a neutral grey.

   2. Depth still climbs by tint, never by shadow — the ladder simply runs the
      other way. In light, canvas is the lightest and cards tint darker; in
      dark, canvas is the darkest and raised surfaces tint lighter. Elevation is
      unchanged as an idea, which is why no shadow had to be added.

   3. Indigo lifts. #533afd against a midnight canvas measures about 2.4:1 —
      unreadable as a link. --action becomes the lighter amethyst so text and
      icons carry, and --text-on-accent goes dark because the fill it sits on is
      now bright. The button inverts; the meaning does not.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  /* Surfaces — the tint ladder, inverted. */
  --surface-canvas:#061b31;
  --surface-band:#0b2440;
  --surface-frosted-card:#14314f;
  --surface-lavender-card:#1f2a5e;
  --surface-indigo-surface:#533afd;

  /* Text — the light theme's prominence order preserved: primary reads first,
     then muted, then secondary, with decor quietest. */
  --text-primary:#f2f6fb;
  --text-muted:#cddcef;
  --text-secondary:#a7bad6;
  --text-decor:#8ba2c4;
  --text-on-accent:#08172b;
  --text-link:#a99dff;

  /* Borders — a hairline has to be lighter than its ground here, not darker. */
  --border-default:#1b3a5c;
  --border-subtle:#152e49;
  --border-lavender:#4b45a8;
  --border-lilac:#3b3f83;
  --border-amethyst:var(--color-amethyst-edge);
  --border-deep:var(--color-deep-violet);

  /* Action — lifted, and the ink on it inverted. */
  --action:#8b7dff;
  --action-hover:#a99dff;
  --action-wash:#211f52;
  --focus-ring:rgba(139,125,255,0.45);

  /* Status — hues lift, washes darken. The same low-chroma cool register:
     still ledger annotation, not consumer-app colour. */
  --status-ok:#4fb894;
  --status-ok-wash:#0c2d24;
  --status-warn:#d9a441;
  --status-warn-wash:#33260c;
  --status-critical:#f08a80;
  --status-critical-hover:#f7a79f;
  --status-critical-wash:#3a1a1c;
  --status-critical-wash-hover:#4b2225;
  --status-neutral:#8ba2c4;
  --status-neutral-wash:#14314f;

  /* Glass — a dark translucent fill. Frosting a dark room with white paint
     gives fog; it has to be the room's own colour, thinned. */
  --glass-fill:rgba(9,29,50,0.72);
  --glass-fill-photo:rgba(9,29,50,0.82);
  --glass-fill-strong:rgba(9,29,50,0.92);
  --glass-border:rgba(255,255,255,0.10);
  --scrim:rgba(2,9,18,0.58);
  --scrim-soft:rgba(2,9,18,0.42);
}