/* ============================================================
   COLORS — Yorker · dark-first, cinematic, MONOCHROME
   Charcoal/near-black ground, off-white ink, and NO secondary
   colour. Emphasis and "signal" come from brightness, weight and
   elevation — never hue. Dark is primary (:root); light is a
   clean neutral inverse.
   ============================================================ */

:root {
  /* ---- Base ramp · neutral charcoal (dark → light) ---- */
  --n-1000:#0A0A0B;
  --n-950:#121214;
  --n-900:#1A1A1D;
  --n-850:#212125;
  --n-800:#2A2A2F;
  --n-700:#3A3A40;
  --n-600:#515158;
  --n-500:#6E6F76;
  --n-400:#8E8F96;
  --n-300:#AFB0B6;
  --n-200:#D2D2D7;
  --n-100:#EDEDEF;
  --n-0:#FFFFFF;

  /* ============ SEMANTIC (dark · primary) ============ */
  --surface-page:#0A0A0B;
  --surface-raised:#121214;
  --surface-elevated:#1A1A1D;
  --surface-overlay:rgba(4,4,5,.72);
  --surface-inverse:#F4F4F6;

  --text-primary:#F4F4F6;
  --text-secondary:#9D9EA4;
  --text-tertiary:#6A6B71;
  --text-quaternary:#46474D;
  --text-on-inverse:#121214;
  --text-on-accent:#0A0A0B;

  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.19);

  /* "Accent" is simply the brightest ink — the system is monochrome */
  --accent:#F4F4F6;
  --accent-strong:#FFFFFF;
  --accent-glow:rgba(255,255,255,.05);
  --focus-ring:#F4F4F6;

  /* Signal via brightness, not hue (flagged = bright, idle = dim) */
  --signal-strong:#F4F4F6;
  --signal-mid:#9D9EA4;
  --signal-dim:#5B5C62;
}

/* ============ LIGHT THEME · neutral inverse ============ */
[data-theme="light"] {
  --surface-page:#FAFAF9;
  --surface-raised:#FFFFFF;
  --surface-elevated:#FFFFFF;
  --surface-overlay:rgba(20,20,22,.42);
  --surface-inverse:#161619;

  --text-primary:#161619;
  --text-secondary:#5B5C62;
  --text-tertiary:#88898F;
  --text-quaternary:#AEAFB5;
  --text-on-inverse:#F4F4F6;
  --text-on-accent:#FFFFFF;

  --border-subtle:rgba(0,0,0,.08);
  --border-default:rgba(0,0,0,.12);
  --border-strong:rgba(0,0,0,.20);

  --accent:#161619;
  --accent-strong:#000000;
  --accent-glow:rgba(0,0,0,.045);
  --focus-ring:#161619;

  --signal-strong:#161619;
  --signal-mid:#5B5C62;
  --signal-dim:#9A9BA1;
}

/* ── Functional status colours (app/product UI only — NOT the brand
   palette; the marketing surface stays strictly monochrome). Muted,
   desaturated hues so status reads clearly without breaking the calm,
   near-monochrome feel. `-bg` is a low-alpha tint for chips/rows. ── */
:root {
  --critical:#E0796B;        /* @kind color */  /* breaches, errors, hard flags */
  --critical-bg:rgba(224,121,107,.13); /* @kind color */
  --warning:#D8B26A;         /* @kind color */  /* watch, needs review */
  --warning-bg:rgba(216,178,106,.13);  /* @kind color */
  --positive:#7FB59A;        /* @kind color */  /* cleared, matched, healthy */
  --positive-bg:rgba(127,181,154,.13); /* @kind color */
  --info:#7C9BC4;            /* @kind color */  /* neutral informational */
  --info-bg:rgba(124,155,196,.13);     /* @kind color */
}

[data-theme="light"] {
  --critical:#C0553F;        /* @kind color */
  --critical-bg:rgba(192,85,63,.10);   /* @kind color */
  --warning:#9A7B2E;         /* @kind color */
  --warning-bg:rgba(154,123,46,.11);   /* @kind color */
  --positive:#3E7A5E;        /* @kind color */
  --positive-bg:rgba(62,122,94,.10);   /* @kind color */
  --info:#3F628F;            /* @kind color */
  --info-bg:rgba(63,98,143,.10);       /* @kind color */
}