/* ============================================================================
   Teaching Command Center — shared design tokens
   Nautical palette: cool fog-grey paper by day, deep navy hull by night, with
   a harbor-teal interactive signal and a brass/rope structural accent. Built
   to sit next to the Training Unit Command Center's warm paper + steel-blue
   look and read as unmistakably different at a glance.
   ========================================================================= */
:root {
  /* Neutrals — harbor mist: teal fog over chart paper, not flat office grey */
  --paper: #e2eaee;
  --paper-deep: #d1dce2;
  --paper-2: #d9e3e8;
  --hover-tint: #f2f8f8;
  --card: #f6fafa;
  --line: #bdd0d7;
  --line-soft: #cedde3;
  --ink: #0f1a22;
  --muted: #3f5058;
  --faint: #5a6b73;

  /* Brand — harbor teal (interactive signal ONLY: focus, links, toggles, primary buttons) */
  --brand: #0c7272;
  --brand-deep: #0a5c5c;
  --brand-tint: #d9eeed;
  --on-accent: #ffffff;

  /* Earth — brass / rope (structural warmth: panel ticks, eyebrows, notices) */
  --earth: #9a7428;
  --earth-deep: #7d5f1f;
  --earth-tint: #f5eed8;
  --warm: #b06f2e;
  --warm-deep: #925a22;
  --warm-tint: #f8efe3;

  /* Signal hues — per-tile accents, kept in the navy/teal/brass family */
  --hue-1: #0c7272;
  --hue-1-tint: #d9eeed;
  --hue-2: #1a5276;
  --hue-2-tint: #dce8f0;
  --hue-3: #9a7428;
  --hue-3-tint: #f5eed8;
  --hue-4: #3c6e71;
  --hue-4-tint: #dce9ea;
  --hue-5: #4c6a92;
  --hue-5-tint: #e3eaf2;
  --hue-6: #2f7d7d;
  --hue-6-tint: #d9eded;
  --hue-7: #495764;
  --hue-7-tint: #e4eaee;
  --hue-8: #925a22;
  --hue-8-tint: #f3e8da;

  /* Page canvas — soft atmospheric lift; dark mode flattens this back to hull */
  --canvas-bg: linear-gradient(168deg, #eaf0f3 0%, #dfe8ec 44%, #e6ecef 100%);
  --hero-bg: linear-gradient(118deg, #f8fbfb 10%, #e5f0ef 50%, color-mix(in srgb, var(--brand-deep) 11%, #e8f2f1) 100%);
  --chart-grid: color-mix(in srgb, var(--brand) 9%, transparent);
  --rule-brass: color-mix(in srgb, var(--earth) 42%, transparent);
  --panel-sidebar-bg: color-mix(in srgb, var(--brand) 4%, var(--card));
  --panel-sidebar-border: color-mix(in srgb, var(--brand) 12%, var(--line));
  --panel-sidebar-shadow: var(--shadow);

  /* Status — lifecycle states (kept for parity with reused component CSS) */
  --ok: #1a7f5a;
  --wait: #1a5276;
  --idle: #7c8a92;
  --overdue: #b3402c;
  --danger: #b3402c;
  --working: #b06f2e;

  /* Typography */
  --sans: "Geist", "Segoe UI Variable", "Segoe UI", "Inter", system-ui, sans-serif;
  --display: "Libre Baskerville", "Iowan Old Style", Georgia, serif;

  /* Layout */
  --layout-max: 1160px;
  --layout-gutter: 24px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(10, 50, 55, 0.06), 0 8px 26px -6px rgba(11, 60, 65, 0.14);
  --shadow-lg: 0 3px 10px rgba(10, 50, 55, 0.08), 0 20px 44px -12px rgba(11, 60, 65, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1420;
    --paper-deep: #070d15;
    --paper-2: #101c2a;
    --hover-tint: #16233333;
    --hover-tint: #182636;
    --card: #101c2a;
    --line: #24374a;
    --line-soft: #1c2c3d;
    --ink: #eef4f6;
    --muted: #9db0bc;
    --faint: #7b8e9a;
    --brand: #4fc3c3;
    --brand-deep: #4fc3c3;
    --brand-tint: #10302f;
    --on-accent: #06181a;
    --earth: #d9b158;
    --earth-deep: #d9b158;
    --earth-tint: #2e2612;
    --warm: #e0a35c;
    --warm-deep: #e0a35c;
    --warm-tint: #302411;
    --hue-1: #4fc3c3;
    --hue-1-tint: #10302f;
    --hue-2: #6fa8d6;
    --hue-2-tint: #10222f;
    --hue-3: #d9b158;
    --hue-3-tint: #2e2612;
    --hue-4: #6fb8ba;
    --hue-4-tint: #10292a;
    --hue-5: #8ea6c9;
    --hue-5-tint: #131f2c;
    --hue-6: #57b8b8;
    --hue-6-tint: #0e2b2b;
    --hue-7: #9db0bc;
    --hue-7-tint: #17222d;
    --hue-8: #e0a35c;
    --hue-8-tint: #302411;
    --canvas-bg: var(--paper);
    --hero-bg: var(--card);
    --panel-sidebar-bg: transparent;
    --panel-sidebar-border: transparent;
    --panel-sidebar-shadow: none;
    --ok: #4fc98f;
    --wait: #6fa8d6;
    --idle: #9db0bc;
    --overdue: #e08a72;
    --danger: #e08a72;
    --working: #e0a35c;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.42), 0 8px 28px -6px rgba(0, 0, 0, 0.56);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.52), 0 20px 42px -10px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  --paper: #0b1420;
  --paper-deep: #070d15;
  --paper-2: #101c2a;
  --hover-tint: #182636;
  --card: #101c2a;
  --line: #24374a;
  --line-soft: #1c2c3d;
  --ink: #eef4f6;
  --muted: #9db0bc;
  --faint: #7b8e9a;
  --brand: #4fc3c3;
  --brand-deep: #4fc3c3;
  --brand-tint: #10302f;
  --on-accent: #06181a;
  --earth: #d9b158;
  --earth-deep: #d9b158;
  --earth-tint: #2e2612;
  --warm: #e0a35c;
  --warm-deep: #e0a35c;
  --warm-tint: #302411;
  --hue-1: #4fc3c3;
  --hue-1-tint: #10302f;
  --hue-2: #6fa8d6;
  --hue-2-tint: #10222f;
  --hue-3: #d9b158;
  --hue-3-tint: #2e2612;
  --hue-4: #6fb8ba;
  --hue-4-tint: #10292a;
  --hue-5: #8ea6c9;
  --hue-5-tint: #131f2c;
  --hue-6: #57b8b8;
  --hue-6-tint: #0e2b2b;
  --hue-7: #9db0bc;
  --hue-7-tint: #17222d;
  --hue-8: #e0a35c;
  --hue-8-tint: #302411;
  --canvas-bg: var(--paper);
  --hero-bg: var(--card);
  --panel-sidebar-bg: transparent;
  --panel-sidebar-border: transparent;
  --panel-sidebar-shadow: none;
  --ok: #4fc98f;
  --wait: #6fa8d6;
  --idle: #9db0bc;
  --overdue: #e08a72;
  --danger: #e08a72;
  --working: #e0a35c;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.42), 0 8px 28px -6px rgba(0, 0, 0, 0.56);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.52), 0 20px 42px -10px rgba(0, 0, 0, 0.7);
}