/* ProtectMyPortfolio — Design v3 tokens
 * Source of truth: "PMP Design Brief v3" (design v3 handoff README, adopted 2026-08-31).
 * Values here were computed, not eyeballed. Do not substitute from a house palette
 * without re-verifying the L* separation across four vision simulations. */

:root {
  /* ---- Neutrals ---------------------------------------------------------- */
  --bond:          #F5F2EC;  /* page background (paper) */
  --plate:         #EDE8DE;  /* recessed panels, provenance plate, expanders */
  --card:          #FFFFFF;
  --rule:          #E2DCD1;  /* borders, hairlines */
  --rule-strong:   #D6CFC2;  /* plate borders, secondary outlines */
  --ink:           #121F2A;  /* headings, dark band, primary buttons, ALL numerals */
  --text:          #2A3641;  /* body — 11.2:1 on bond (AAA) */
  --text-secondary:#414D58;  /* secondary — 7.4:1 (AAA) */
  --text-meta:     #4A4034;  /* mono meta and labels on plate */
  --harbor:        #17466E;  /* eyebrows, links, active states */
  --slate:         #7D8794;  /* logo divider when brass is spent elsewhere */
  --brass:         #C08A2E;  /* LOGO ONLY — never a data colour */

  /* ---- The two semantic scales (7d ramp) --------------------------------
   * One ramp: forward for PMP (low is calm), reversed for PPS (high is good).
   * Minimum step 14.0 L* across normal/deuteranope/protanope/tritanope.
   * Two values per position: FILL for areas, MARK for anything under 4px.
   * Alert's fill (L* 7) is darker than the brand ink, so at hairline widths it
   * reads as a stray rule — that is why mark values exist. */
  --band-1-fill: #D4E8CD;  --band-1-mark: #437C2F;  /* L* 90 — Normal 0-20   / Protected  81-100 */
  --band-2-fill: #B9AE15;  --band-2-mark: #78710A;  /* L* 70 — Watch 21-40   / Sheltered  63-80  */
  --band-3-fill: #9B4E13;  --band-3-mark: #AE5713;  /* L* 42 — Caution 41-60 / Exposed    41-62  */
  --band-4-fill: #641E13;  --band-4-mark: #CA3A24;  /* L* 23 — Defensive 61-75/ Vulnerable 21-40 */
  --band-5-fill: #300708;  --band-5-mark: #D72329;  /* L*  7 — Alert 76-100  / Critical    0-20  */

  /* Small-text-safe supporting values (AAA) */
  --red-dark:   #8E2A18;
  --green-dark: #305A3E;

  /* ---- Typography -------------------------------------------------------- */
  --font-wordmark: 'Cinzel', Georgia, serif;
  --font-display:  'Source Serif 4', Georgia, serif;
  --font-body:     'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --font-mono:     'IBM Plex Mono', Consolas, monospace;

  /* ---- Spacing (4px base) ------------------------------------------------ */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px;  --s-7: 32px;  --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px;

  /* Mobile rhythm */
  --block-gap:   40px;  /* between blocks; red day adds 8px */
  --card-pad:    24px;
  --gutter:      16px;
  --content-max: 1180px;

  /* ---- Radius — always decreases inward; nothing exceeds 18 -------------- */
  --r-score:  18px;
  --r-card:   14px;
  --r-button:  8px;
  --r-plate:   6px;
  --r-pill:  999px;  /* status pills only */

  /* ---- Elevation — ink-tinted, never black ------------------------------- */
  --e0-border: 1px solid var(--rule);
  --e1: 0 6px 18px rgba(18, 31, 42, .05);
  --e2: 0 12px 30px rgba(18, 31, 42, .09), inset 0 1px 0 rgba(255, 255, 255, .8);
  --e3: 0 24px 56px rgba(18, 31, 42, .16);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-measuring: cubic-bezier(.2, .7, .2, 1);   /* the instrument settling */
  --ease-opening:   cubic-bezier(.32, .72, .3, 1); /* things revealing */
  --t-score:   460ms;  /* counts from YESTERDAY's value, never from zero */
  --t-needle:  520ms;
  --t-ladder:  340ms;
  --t-donut:   420ms;
  --t-spark:   620ms;  /* linear — a plotter, not a flourish */
  --t-open:    220ms;
  --t-close:   160ms;

  /* Tap targets */
  --tap-min:     44px;
  --tap-primary: 48px;
}

/* ---- Red day -------------------------------------------------------------
 * Defensive and Alert: more risk, LESS noise. All motion off, every surface
 * drops one elevation step, section rhythm +8px, band colour confined to
 * keylines and the gauge. Driven by one attribute on <html>, never per-component. */
[data-band="defensive"],
[data-band="alert"] {
  --block-gap: 48px;
  --e1: none;
  --e2: none;
  --e3: 0 6px 18px rgba(18, 31, 42, .05);
}

[data-band="defensive"] *,
[data-band="alert"] * {
  animation: none !important;
  transition: none !important;
}

/* ---- Reduced motion: everything becomes a 120ms opacity fade ------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 120ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-property: opacity !important;
    scroll-behavior: auto !important;
  }
}