/* Intella OS system color tokens (BEHAVIOR-SPEC v0.3.3 §0b). */
:root {
  color-scheme: light dark;
  --ocean-deep: #0A3D62;
  --ocean-900: #0A3D62;
  --ocean: #1478B8;
  --ocean-500: #1478B8;
  --ocean-100: #D7EAF6;
  --ocean-50: #F3F8FC;
  --orange: #BA5219;
  --tick: #1F8A70;
  --ok: #1F8A70;
  /* Text on orange fills. White on #BA5219 is 4.87:1. */
  --on-orange: #FFFFFF;
  /* Error text. Light value clears 4.5:1 on canvas and surface. */
  --down: #B42318;
  /* Danger button fill. White label text clears 4.5:1. --down is too light for that in dark. */
  --danger-fill: #B42318;
  /* Tick button fill. Brand tick #1F8A70 is 4.26:1 with white, short of 4.5. Same hue, darker. */
  --tick-fill: #187A64;
  /* Same orange as text. 4.87:1 on white and 4.56:1 on Mist. Dark text does not use this: #BA5219 is 3.56:1 on dark canvas and 3.04:1 on dark surface. */
  --accent-text: var(--orange);
  /* Links and the keyboard focus ring. Navy on light surfaces. Not a brighter blue. */
  --link: var(--ocean-deep);
  --focus: var(--ocean-deep);

  --canvas: #F3F8FC;
  --surface: #FFFFFF;
  --ink: #12202B;
  --ink-2: #3D5160;
  --ink-3: #6B7F8C;
  --line: #D5DEE6;
  --ocean-wash: #D7EAF6;

  --paper: var(--canvas);
  --card: var(--surface);
  --muted: var(--ink-2);

  --chrome: #0A3D62;
  --chrome-ink: #f4f7fb;
  --chrome-muted: rgba(244, 247, 251, 0.62);
  --shadow: 0 10px 28px rgba(18, 32, 43, 0.08);

  --font: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0B1C28;
    --surface: #122A3A;
    --ink: #E8F0F6;
    --ink-2: #B7C9D6;
    --ink-3: #8AA0B0;
    --line: #1E3A4C;
    --ocean-wash: #16344A;
    --ocean-100: #16344A;
    --down: #F97066;
    /* Ink Light. Orange text misses 4.5:1 here, so text uses ink instead of a second orange. */
    --accent-text: #E8F0F6;
    --link: var(--ink);
    --focus: var(--ink);
    --chrome: #0B1C28;
    --chrome-ink: #E8F0F6;
    --chrome-muted: rgba(232, 240, 246, 0.62);
    --shadow: 0 10px 28px rgba(11, 28, 40, 0.45);
  }
}

/*
  Page helpers (same tokens as the shell — not a Page-only skin).
  Need banner: --ocean-wash + --ink.
  Selected chips/tears: --ocean-wash + 1px --ocean-500. Do not neon-glow orange.
*/
.os-need-banner {
  background: var(--ocean-wash);
  color: var(--ink);
}

.os-chip.is-selected,
.os-tear.is-selected {
  background: var(--ocean-wash);
  border: 1px solid var(--ocean-500);
}