/* ============================================================================
   Training Unit Command Center — shared design tokens
   Cape Cod Palette: Salt-washed neutral paper, a sunrise held to the sky —
   apricot off the top-right corner, sea glass rising from the bottom-left.
   Steel blue interactive signal, terracotta rust place marks.

   The light neutrals INTENTIONALLY diverge from LACE Learning Hub
   app/globals.css, which still runs the warm cream ladder. Re-syncing this file
   wholesale will put the mud back: a yellow paper ladder under a peach bloom
   turns every resting surface khaki. Port the dark block freely; port the light
   neutrals only with this in mind.
   ========================================================================= */
:root {
  /* Neutrals — salt-washed paper ladder. Cooled off the old cream: a yellow
     ladder under a peach bloom turned every resting surface khaki. Holding the
     surfaces neutral is what lets the sunrise stay the only warm thing here. */
  --paper: #f5f5f1;
  --paper-deep: #e4e6e0;
  --paper-2: #ebece7;
  --hover-tint: #f2f3ef;
  --card: #ffffff;
  --line: #d9dbd4;
  --line-soft: #e4e6e0;
  --ink: #151719;
  --muted: #4f575c;
  --faint: #6b747a;

  /* Brand — steel blue (interactive signal ONLY: focus, links, toggles, primary buttons) */
  --brand: #1a5aa0;
  --brand-deep: #12447c;
  --brand-tint: #e8eff8;
  --on-accent: #ffffff;

  /* Earth — terra cotta rust (structural warmth: panel ticks, eyebrows, notices) */
  --earth: #b84d32;
  --earth-deep: #9e3e27;
  --earth-tint: #f9ebe6;
  --warm: #c47414;
  --warm-deep: #9e5b0e;
  --warm-tint: #fdf5e6;

  /* Skill hues — LACE studio palette for per-item accents & ambient canvas */
  --hue-1: #1a5aa0;
  --hue-1-tint: #e8eff8;
  --hue-2: #0e7a80;
  --hue-2-tint: #e3f3f3;
  --hue-3: #5c7326;
  --hue-3-tint: #f0f4e4;
  --hue-4: #c47414;
  --hue-4-tint: #fdf5e6;
  --hue-5: #179a72;
  --hue-5-tint: #e4f5ee;
  --hue-6: #3a8ec9;
  --hue-6-tint: #e8f4fc;
  --hue-7: #414852;
  --hue-7-tint: #ebedef;
  --hue-8: #b84d32;
  --hue-8-tint: #f9ebe6;

  /* Page canvas — Halcyon sunrise: one light source off the top-right corner.
     Radii are absolute so the bloom stays concentrated at the fold instead of
     stretching (and diluting) down a long page. Each layer is `fixed no-repeat`
     so the light source is anchored to the window: scrolling the body box would
     otherwise tile a second sunrise below a long page, or clip the wash flat on
     a short one. */
  --canvas-bg:
    /* sun core — apricot, just off the top-right corner */
    radial-gradient(760px 400px at 92% -70px, color-mix(in srgb, #f2a875 56%, transparent), transparent 70%) fixed no-repeat,
    /* sky — peach across the top, kept high in lightness so it glows not muddies */
    radial-gradient(1700px 780px at 60% -260px, color-mix(in srgb, #f6c8a2 72%, transparent), transparent 74%) fixed no-repeat,
    /* cool aloft — the far side of the sky, still holding night */
    radial-gradient(1000px 500px at 0% -150px, color-mix(in srgb, #7ba0bb 15%, transparent), transparent 72%) fixed no-repeat,
    /* sea glass — silvery blue rising from the bottom-left, where the gold mud was */
    radial-gradient(1240px 900px at -10% 92%, color-mix(in srgb, #93b8cc 24%, transparent), transparent 72%) fixed no-repeat,
    var(--paper);
  /* Hero band catches the bloom on its sunward corner; the rest stays paper-white */
  --hero-bg: linear-gradient(112deg, var(--card) 42%, color-mix(in srgb, #f6c39c 26%, var(--card)) 100%);

  /* Status — lifecycle / Monday task states */
  --ok: #179a72;
  --wait: #1c63b0;
  --idle: #8b909d;
  --overdue: #c8493b;
  --danger: #c8493b;
  --working: #c8791b;

  /* Typography */
  --sans: "Geist", "Segoe UI Variable", "Segoe UI", "Inter", system-ui, sans-serif;

  /* Layout */
  --radius: 12px;
  --radius-lg: 16px;
  /* Cool slate shadow: a brown shadow over a warm field was the other half of
     the mud. Slate against salt-washed paper reads as clean shade, and the
     tight 1px line keeps every card edge crisp. */
  --shadow: 0 1px 2px rgba(38, 54, 63, 0.055), 0 9px 28px -9px rgba(38, 54, 63, 0.14);
  --shadow-lg: 0 3px 10px rgba(38, 54, 63, 0.08), 0 22px 46px -13px rgba(38, 54, 63, 0.20);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #13151b;
    --paper-deep: #0e0f14;
    --paper-2: #212530;
    --hover-tint: #282d38;
    --card: #191c24;
    --line: #2e3340;
    --line-soft: #252934;
    --ink: #f4f5f8;
    --muted: #a2a8b7;
    --faint: #7f8698;
    --brand: #75a7f2;
    --brand-deep: #75a7f2;
    --brand-tint: #142848;
    --on-accent: #0e0f14;
    --earth: #eb917a;
    --earth-deep: #eb917a;
    --earth-tint: #361b15;
    --warm: #e0a552;
    --warm-deep: #e0a552;
    --warm-tint: #332710;
    --hue-1: #75a7f2;
    --hue-1-tint: #142848;
    --hue-2: #4fc3c3;
    --hue-2-tint: #0e2f31;
    --hue-3: #a9c06a;
    --hue-3-tint: #222912;
    --hue-4: #e0a552;
    --hue-4-tint: #332710;
    --hue-5: #5fc9a8;
    --hue-5-tint: #122f27;
    --hue-6: #7cc0ec;
    --hue-6-tint: #122638;
    --hue-7: #a2a8b7;
    --hue-7-tint: #222631;
    --hue-8: #eb917a;
    --hue-8-tint: #361b15;
    --canvas-bg:
      radial-gradient(ellipse 65% 45% at 88% -5%, color-mix(in srgb, #3d2317 35%, transparent), transparent),
      radial-gradient(ellipse 75% 45% at 45% -5%, color-mix(in srgb, var(--brand) 8%, transparent), transparent),
      var(--paper);
    --hero-bg: var(--card);
    --ok: #5fc9a8;
    --wait: #3b8ede;
    --idle: #a2a8b7;
    --overdue: #eb917a;
    --danger: #eb917a;
    --working: #e0a552;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.38), 0 8px 28px -6px rgba(0, 0, 0, 0.52);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.48), 0 20px 42px -10px rgba(0, 0, 0, 0.68);
  }
}

:root[data-theme="dark"] {
  --paper: #13151b;
  --paper-deep: #0e0f14;
  --paper-2: #212530;
  --hover-tint: #282d38;
  --card: #191c24;
  --line: #2e3340;
  --line-soft: #252934;
  --ink: #f4f5f8;
  --muted: #a2a8b7;
  --faint: #7f8698;
  --brand: #75a7f2;
  --brand-deep: #75a7f2;
  --brand-tint: #142848;
  --on-accent: #0e0f14;
  --earth: #eb917a;
  --earth-deep: #eb917a;
  --earth-tint: #361b15;
  --warm: #e0a552;
  --warm-deep: #e0a552;
  --warm-tint: #332710;
  --hue-1: #75a7f2;
  --hue-1-tint: #142848;
  --hue-2: #4fc3c3;
  --hue-2-tint: #0e2f31;
  --hue-3: #a9c06a;
  --hue-3-tint: #222912;
  --hue-4: #e0a552;
  --hue-4-tint: #332710;
  --hue-5: #5fc9a8;
  --hue-5-tint: #122f27;
  --hue-6: #7cc0ec;
  --hue-6-tint: #122638;
  --hue-7: #a2a8b7;
  --hue-7-tint: #222631;
  --hue-8: #eb917a;
  --hue-8-tint: #361b15;
  --canvas-bg:
    radial-gradient(ellipse 65% 45% at 88% -5%, color-mix(in srgb, #3d2317 35%, transparent), transparent),
    radial-gradient(ellipse 75% 45% at 45% -5%, color-mix(in srgb, var(--brand) 8%, transparent), transparent),
    var(--paper);
  --hero-bg: var(--card);
  --ok: #5fc9a8;
  --wait: #3b8ede;
  --idle: #a2a8b7;
  --overdue: #eb917a;
  --danger: #eb917a;
  --working: #e0a552;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.38), 0 8px 28px -6px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.48), 0 20px 42px -10px rgba(0, 0, 0, 0.68);
}