/* =============================================================================
   OE5XRX Station Manager — Color & Design Tokens
   Single source of truth. Loaded before app.css.
   ============================================================================= */

/* ---------- Dark tokens (default) ---------------------------------------- */
:root {
  /* Surfaces — marine dark ramp (bg #0A1219 / surface #0F1C28) */
  --bg-0:#070C11; --bg-1:#0A1219; --bg-2:#0F1C28; --bg-3:#16283A; --bg-hover:#1E3A50;

  /* Lines (border #1A2D3D) */
  --line:#1A2D3D; --line-bright:#2C4A63; --line-hot:#3E6588;

  /* Ink (text #D8ECF5, muted #7AAFCA) */
  --ink-0:#D8ECF5; --ink-1:#A9C4D6; --ink-2:#7AAFCA; --ink-3:#4E6B7E;

  /* Accent = brand cyan */
  --accent:#3AC6D6; --accent-soft:#7FE0EB; --accent-deep:#1E9EAD;
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent)  8%, transparent);

  /* Semantic (brand dark) — amber survives as warn */
  --signal:#4DB870; --signal-soft: color-mix(in srgb, var(--signal) 14%, transparent);
  --warn:#FFB84D;   --warn-soft:   color-mix(in srgb, var(--warn)   14%, transparent);
  --danger:#F06060; --danger-soft: color-mix(in srgb, var(--danger) 15%, transparent);

  /* Status kept distinct from the cyan accent */
  --cyan:#5FBFE0;   --cyan-soft:   color-mix(in srgb, var(--cyan)   12%, transparent);
  --violet:#9B6BFF; --violet-soft: color-mix(in srgb, var(--violet) 14%, transparent);

  /* local decorative (not branding-anchored) */
  --meter-hi:#5AEDAB; --meter-lo:#00A875; --ptt-tx:#D2273F;

  /* New dark tokens */
  --primary:#3AC6D6;
  --shadow-color:#000000;
  --sheen-color:#FFFFFF;
  --on-accent-ink:#08131A;
  --term-bg:#000000;

  /* Shape */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 0 0 color-mix(in srgb, var(--shadow-color) 40%, transparent), 0 0 0 1px var(--line);
  --shadow-md: 0 6px 24px -12px color-mix(in srgb, var(--shadow-color) 80%, transparent), 0 0 0 1px var(--line);
  --shadow-lg: 0 32px 80px -40px color-mix(in srgb, var(--shadow-color) 90%, transparent), 0 0 0 1px var(--line);
  --shadow-glow: 0 0 32px -4px var(--accent-glow);

  /* Typography */
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* Metrics */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --rail-w: 26px; /* vertical rack label */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Light theme — Palette C (full parity, branding-anchored) ------ */
:root[data-theme="light"] {
  /* Surfaces — pale blue-grey ramp */
  --bg-0:#E9EEF2; --bg-1:#F4F7F9; --bg-2:#E8EFF4; --bg-3:#FFFFFF; --bg-hover:#DDE7EE;

  /* Lines */
  --line:#C8D6E0; --line-bright:#B4C6D3; --line-hot:#9DB3C3;

  /* Ink */
  --ink-0:#0D1A24; --ink-1:#334657; --ink-2:#526070; --ink-3:#8497A6;

  /* Accent = brand cyan (AA-adjusted for light bg) */
  --accent:#0E7580; --accent-soft:#0C6672; --accent-deep:#0B5C66;   /* accent-light-aa-override: #0E7580 */
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent)  8%, transparent);

  /* Semantic (branding-anchored) */
  --signal:#1B6B35; --signal-soft: color-mix(in srgb, var(--signal) 14%, transparent);
  --warn:#8A5200;   --warn-soft:   color-mix(in srgb, var(--warn)   14%, transparent);
  --danger:#B02020; --danger-soft: color-mix(in srgb, var(--danger) 15%, transparent);

  /* Status */
  --cyan:#0B6E8C;   --cyan-soft:   color-mix(in srgb, var(--cyan)   12%, transparent);
  --violet:#5B3CB8; --violet-soft: color-mix(in srgb, var(--violet) 14%, transparent);

  /* local decorative (not branding-anchored) */
  --meter-hi:#5AEDAB; --meter-lo:#00A875; --ptt-tx:#D2273F;

  /* New tokens */
  --primary:#123B54;
  --shadow-color:#0D1A24;
  --sheen-color:#FFFFFF;
  --on-accent-ink:#F4F7F9;
  --term-bg:#000000;

  /* Shape (theme-independent — repeated for full parity) */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 0 0 color-mix(in srgb, var(--shadow-color) 6%, transparent), 0 0 0 1px var(--line);
  --shadow-md: 0 6px 24px -12px color-mix(in srgb, var(--shadow-color) 14%, transparent), 0 0 0 1px var(--line);
  --shadow-lg: 0 32px 80px -40px color-mix(in srgb, var(--shadow-color) 20%, transparent), 0 0 0 1px var(--line);
  --shadow-glow: 0 0 32px -4px var(--accent-glow);

  /* Typography (theme-independent — repeated for full parity) */
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* Metrics (theme-independent — repeated for full parity) */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --rail-w: 26px; /* vertical rack label */

  /* Motion (theme-independent — repeated for full parity) */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}