/* PULSAR design tokens.
   Theme: Midnight & Gold (2026-10-01, replacing Inspiration's violet and
   pink at the owner's request) -- the night sky the North Star sits in.
   Ivory ink on midnight navy, surfaces as thin layers of starlight over it,
   and three hues: starlight blue (the logo's, the main accent), ice aqua
   (beside it) and gold (the star and the compass rose; primary actions).
   The light theme is its twin on ivory paper: royal blue, teal and
   burnished gold, deep enough to read. Fixed hues and no blooms.

   Three states, not two. Bare `:root` is the dark palette and the default.
   With no `data-theme` attribute the app follows the OS, so the light tokens
   are applied under `prefers-color-scheme: light` -- guarded with
   `:not([data-theme="dark"])` so an explicit dark choice still beats a light
   OS. `:root[data-theme="light"]` repeats them so the toggle wins in the other
   direction too. Every colour is defined here and only here; a component that
   hardcodes one breaks in whichever theme it wasn't written for. */

:root {
  --bg: #060a14;
  /* Starlight layers over the midnight background. */
  --surface: #0f1524;
  --surface-2: #151c2d;
  --surface-hover: #1c2436;
  --border: #243047;
  --border-strong: #36435e;

  --text: #f1eee6;
  --text-muted: #8e97a8;
  --text-faint: #646d80;

  /* Starlight blue, ice aqua, gold. */
  --accent-1: #8fb8ff;
  --accent-2: #7fd3e3;
  --accent-3: #e5c27a;
  /* Primary actions: a gold bar, lit at its leading edge. */
  --accent-gradient: linear-gradient(100deg, #f0d593, #d4a64e);
  --accent-1-soft: rgba(143, 184, 255, 0.14);
  /* Ink on an accent fill: midnight on the gold and the pale accents. */
  --on-accent: #0b1020;

  --success: #34d399;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  /* The Calendar's Outlook cues: its blue for today and selection, its red for now. */
  --cal-accent: #479ef5;
  --cal-now: #dc626d;
  /* The Compass page's rose: its gold, beside the starlight blue. */
  --royal-gold: #dcbd78;
  /* B-7: a fixed obligation is kept time, the same slate everywhere it is
     drawn (Calendar, Week planner, a routine's day, the time strips): neither
     a goal type's hue nor an alarm (INV-12), hatched as unavailable time is. */
  --obligation: #93a0b6;
  --obligation-soft: rgba(147, 160, 182, 0.12);
  --obligation-hatch: rgba(147, 160, 182, 0.26);
  --obligation-fill: repeating-linear-gradient(135deg, var(--obligation-soft) 0 6px, var(--obligation-hatch) 6px 8px);
  /* Chart series (J-5): five categorical hues in a fixed order, stepped for
     each surface and validated (CVD and normal-vision separation, contrast). */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  /* A sixth, for the compass's six areas of life (2026-10-20). */
  --series-6: #9873e6;
  /* Words on a series colour: dark ink, legible on every one in both themes. */
  --on-series: #0b1020;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 1px rgba(143, 184, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.35);

  /* Backdrop behind a modal. Darkens in both themes -- a scrim that took the
     page's own background would stop reading as "behind" in light mode. */
  --scrim: rgba(3, 6, 14, 0.66);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 32px;
  --space-8: 44px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  /* Quotes: a serif the system already has, so nothing is downloaded. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Book Antiqua", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Ivory paper, the twin of the dark theme's ivory on midnight. */
    --bg: #f7f4ec;
    --surface: #fffdf8;
    --surface-2: #f1ede3;
    --surface-hover: #e9e4d8;
    --border: #e3ddd0;
    --border-strong: #cfc7b7;

    --text: #131a2c;
    --text-muted: #535a6b;
    --text-faint: #868c99;

    /* Royal blue, teal, burnished gold -- deep enough to read on paper. */
    --accent-1: #1f4fa3;
    --accent-2: #0e7489;
    --accent-3: #9a6c17;
    --accent-gradient: linear-gradient(100deg, #a57720, #84590f);
    --accent-1-soft: rgba(31, 79, 163, 0.1);
    --on-accent: #fffdf8;

    --success: #14855c;
    --danger: #c0344b;
    --danger-soft: rgba(192, 52, 75, 0.1);
    --warning: #a5670a;
    --cal-accent: #0f6cbd;
    --cal-now: #c4314b;
    --royal-gold: #8f6a24;
    --obligation: #56627a;
    --obligation-soft: rgba(86, 98, 122, 0.08);
    --obligation-hatch: rgba(86, 98, 122, 0.2);
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #8a63e0;

    --shadow-sm: 0 2px 8px rgba(28, 26, 23, 0.06);
    --shadow-md: 0 12px 32px rgba(28, 26, 23, 0.1);
    --shadow-glow: 0 0 0 1px rgba(31, 79, 163, 0.22), 0 6px 18px rgba(19, 26, 44, 0.1);

    --scrim: rgba(28, 26, 23, 0.44);
  }
}

:root[data-theme="light"] {
  /* Ivory paper, the twin of the dark theme's ivory on midnight. */
  --bg: #f7f4ec;
  --surface: #fffdf8;
  --surface-2: #f1ede3;
  --surface-hover: #e9e4d8;
  --border: #e3ddd0;
  --border-strong: #cfc7b7;

  --text: #131a2c;
  --text-muted: #535a6b;
  --text-faint: #868c99;

  /* Royal blue, teal, burnished gold -- deep enough to read on paper. */
  --accent-1: #1f4fa3;
  --accent-2: #0e7489;
  --accent-3: #9a6c17;
  --accent-gradient: linear-gradient(100deg, #a57720, #84590f);
  --accent-1-soft: rgba(31, 79, 163, 0.1);
  --on-accent: #fffdf8;

  --success: #14855c;
  --danger: #c0344b;
  --danger-soft: rgba(192, 52, 75, 0.1);
  --warning: #a5670a;
  --cal-accent: #0f6cbd;
  --cal-now: #c4314b;
  --royal-gold: #8f6a24;
  --obligation: #56627a;
  --obligation-soft: rgba(86, 98, 122, 0.08);
  --obligation-hatch: rgba(86, 98, 122, 0.2);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #8a63e0;

  --shadow-sm: 0 2px 8px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 12px 32px rgba(28, 26, 23, 0.1);
  --shadow-glow: 0 0 0 1px rgba(31, 79, 163, 0.22), 0 6px 18px rgba(19, 26, 44, 0.1);

  --scrim: rgba(28, 26, 23, 0.44);
}

/* Repainting every surface at once looks broken; a short cross-fade on the
   things that actually change colour reads as a deliberate switch. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching,
  html.theme-switching body,
  html.theme-switching .topbar,
  html.theme-switching .footer,
  html.theme-switching .card,
  html.theme-switching .work-card,
  html.theme-switching .pack-card,
  html.theme-switching .bars,
  html.theme-switching .quote-today {
    transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
      border-color 0.22s var(--ease);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

a {
  color: inherit;
}