/* ==========================================================================
   H-H Planner — design tokens
   --------------------------------------------------------------------------
   One token contract, eight themes, plus a dark mode that re-steps the
   neutrals for every theme. Components never reference a raw hex; they only
   ever reference a role (--surface, --accent, --ink, …), which is what makes
   a theme swap change the whole product consistently.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* ---- Shape ----------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing --------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  --gutter: 20px;
  --card-pad: 20px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --mobilenav-h: 68px;

  /* ---- Status (reserved — never reused as a chart series) -------------- */
  --ok: #1a8a5f;
  --ok-soft: #dcf3e8;
  --warn: #b57400;
  --warn-soft: #fbf0d8;
  --danger: #c93a3a;
  --danger-soft: #fbe4e4;
  --info: #2a6fc4;
  --info-soft: #e2edfb;

  /* ---- Priority scale -------------------------------------------------- */
  --pri-low: #7c8aa3;
  --pri-medium: #2a78d6;
  --pri-high: #d97706;
  --pri-top: #c93a6a;

  /* ---- Chart series ----------------------------------------------------
     The validated categorical palette, in fixed slot order. Deliberately
     separate from the brand pastels: pastels are too light and too low in
     chroma to survive colour-vision-deficiency separation as data marks.
     Slots are assigned in order and never cycled.                         */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* Sequential ramp (single hue, light → dark) for magnitude encodings. */
  --seq-100: #cde2fb;
  --seq-250: #86b6ef;
  --seq-400: #3987e5;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;

  /* ---- Neutrals shared by all light themes ----------------------------- */
  --ink: #232346;
  --ink-2: #61617f;
  --ink-3: #8a8aa5;
  --on-accent: #ffffff;

  --line: rgba(35, 35, 70, 0.1);
  --line-strong: rgba(35, 35, 70, 0.18);

  --shadow-sm: 0 1px 2px rgba(48, 30, 70, 0.05), 0 2px 6px rgba(48, 30, 70, 0.04);
  --shadow-md: 0 4px 12px rgba(48, 30, 70, 0.07), 0 12px 28px rgba(48, 30, 70, 0.05);
  --shadow-lg: 0 10px 24px rgba(48, 30, 70, 0.1), 0 28px 60px rgba(48, 30, 70, 0.08);

  --surface: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.62);
  --surface-sunken: rgba(35, 35, 70, 0.04);
  --overlay-scrim: rgba(28, 20, 45, 0.42);
}

/* ==========================================================================
   Themes — each supplies the page wash and the accent family only.
   ========================================================================== */

:root,
:root[data-theme="pink-dream"] {
  --theme-name: "Pink Dream";
  --page: #fff6fa;
  --page-wash-1: rgba(253, 220, 235, 0.55);
  --page-wash-2: rgba(226, 214, 250, 0.42);
  --accent: #c43c78;
  --accent-2: #8f5ed0;
  --accent-soft: #fde5ef;
  --accent-softer: #fef3f8;
  --accent-ring: rgba(196, 60, 120, 0.3);
}

:root[data-theme="peach-glow"] {
  --theme-name: "Peach Glow";
  --page: #fff8f3;
  --page-wash-1: rgba(255, 219, 194, 0.55);
  --page-wash-2: rgba(253, 232, 198, 0.45);
  --accent: #b95220;
  --accent-2: #d08a2a;
  --accent-soft: #ffe8d9;
  --accent-softer: #fff4ec;
  --accent-ring: rgba(185, 82, 32, 0.3);
}

:root[data-theme="lavender-mist"] {
  --theme-name: "Lavender Mist";
  --page: #f9f6ff;
  --page-wash-1: rgba(226, 214, 253, 0.6);
  --page-wash-2: rgba(240, 216, 246, 0.4);
  --accent: #6d4fc9;
  --accent-2: #a95fd0;
  --accent-soft: #ece5fd;
  --accent-softer: #f6f2ff;
  --accent-ring: rgba(109, 79, 201, 0.3);
}

:root[data-theme="mint-calm"] {
  --theme-name: "Mint Calm";
  --page: #f3fcf9;
  --page-wash-1: rgba(199, 240, 226, 0.6);
  --page-wash-2: rgba(212, 238, 246, 0.45);
  --accent: #0f7d67;
  --accent-2: #3f9fa8;
  --accent-soft: #d8f3ea;
  --accent-softer: #eefaf6;
  --accent-ring: rgba(15, 125, 103, 0.3);
}

:root[data-theme="sky-blue"] {
  --theme-name: "Sky Blue";
  --page: #f4f9ff;
  --page-wash-1: rgba(205, 226, 251, 0.6);
  --page-wash-2: rgba(219, 232, 252, 0.45);
  --accent: #2064b8;
  --accent-2: #4a93c8;
  --accent-soft: #ddebfb;
  --accent-softer: #eff6fe;
  --accent-ring: rgba(32, 100, 184, 0.3);
}

:root[data-theme="rose-garden"] {
  --theme-name: "Rose Garden";
  --page: #fff5f7;
  --page-wash-1: rgba(252, 212, 221, 0.6);
  --page-wash-2: rgba(248, 224, 216, 0.42);
  --accent: #bb2f54;
  --accent-2: #d9636f;
  --accent-soft: #fde1e7;
  --accent-softer: #fef1f4;
  --accent-ring: rgba(187, 47, 84, 0.3);
}

:root[data-theme="sage-green"] {
  --theme-name: "Sage Green";
  --page: #f7faf4;
  --page-wash-1: rgba(219, 234, 207, 0.6);
  --page-wash-2: rgba(234, 238, 214, 0.45);
  --accent: #4f7046;
  --accent-2: #7d9459;
  --accent-soft: #e4eedb;
  --accent-softer: #f2f7ec;
  --accent-ring: rgba(79, 112, 70, 0.3);
}

:root[data-theme="midnight"] {
  --theme-name: "Midnight";
  --page: #f5f4fb;
  --page-wash-1: rgba(216, 213, 245, 0.6);
  --page-wash-2: rgba(226, 222, 248, 0.45);
  --accent: #453a9e;
  --accent-2: #6d5ed6;
  --accent-soft: #e5e2f7;
  --accent-softer: #f2f0fb;
  --accent-ring: rgba(69, 58, 158, 0.3);
}

/* ==========================================================================
   Dark mode — re-steps the neutrals and the chart palette for the dark
   surface. This is a selected dark theme, not an automatic inversion.
   Applies to whichever theme is active, so the accent family carries over.
   ========================================================================== */

:root[data-dark] {
  --ink: #f4f1fb;
  --ink-2: #b3adcb;
  --ink-3: #8b85a6;

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);

  --surface: #262238;
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-sunken: rgba(0, 0, 0, 0.22);
  --overlay-scrim: rgba(8, 6, 16, 0.62);

  --page: #16141f;
  --page-wash-1: rgba(80, 60, 120, 0.3);
  --page-wash-2: rgba(50, 60, 110, 0.25);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.46);

  --ok: #4cc08c;
  --ok-soft: rgba(76, 192, 140, 0.16);
  --warn: #e0a83c;
  --warn-soft: rgba(224, 168, 60, 0.16);
  --danger: #ef6b6b;
  --danger-soft: rgba(239, 107, 107, 0.16);
  --info: #6aa5ec;
  --info-soft: rgba(106, 165, 236, 0.16);

  --pri-low: #9aa6bd;
  --pri-medium: #6aa5ec;
  --pri-high: #e8a44c;
  --pri-top: #ec7196;

  /* Chart series, stepped for the dark surface. */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;

  --seq-100: #0d366b;
  --seq-250: #184f95;
  --seq-400: #256abf;
  --seq-550: #3987e5;
  --seq-700: #86b6ef;
}

/* Dark-mode accent families: the light accents are too dark to read on a dark
   surface, so each theme gets a lighter step of the same hue. */
:root[data-dark][data-theme="pink-dream"] {
  --accent: #ef7fae;
  --accent-2: #b795ea;
  --accent-soft: rgba(239, 127, 174, 0.16);
  --accent-softer: rgba(239, 127, 174, 0.09);
  --accent-ring: rgba(239, 127, 174, 0.4);
  --on-accent: #2b0f1d;
}
:root[data-dark][data-theme="peach-glow"] {
  --accent: #eb924f;
  --accent-2: #e8bb5e;
  --accent-soft: rgba(235, 146, 79, 0.16);
  --accent-softer: rgba(235, 146, 79, 0.09);
  --accent-ring: rgba(235, 146, 79, 0.4);
  --on-accent: #2d1607;
}
:root[data-dark][data-theme="lavender-mist"] {
  --accent: #a68cf0;
  --accent-2: #cd8ce8;
  --accent-soft: rgba(166, 140, 240, 0.16);
  --accent-softer: rgba(166, 140, 240, 0.09);
  --accent-ring: rgba(166, 140, 240, 0.4);
  --on-accent: #180d33;
}
:root[data-dark][data-theme="mint-calm"] {
  --accent: #4fc4a6;
  --accent-2: #63c0cb;
  --accent-soft: rgba(79, 196, 166, 0.16);
  --accent-softer: rgba(79, 196, 166, 0.09);
  --accent-ring: rgba(79, 196, 166, 0.4);
  --on-accent: #042019;
}
:root[data-dark][data-theme="sky-blue"] {
  --accent: #5ea6ef;
  --accent-2: #74c0e0;
  --accent-soft: rgba(94, 166, 239, 0.16);
  --accent-softer: rgba(94, 166, 239, 0.09);
  --accent-ring: rgba(94, 166, 239, 0.4);
  --on-accent: #06192e;
}
:root[data-dark][data-theme="rose-garden"] {
  --accent: #ec6f8d;
  --accent-2: #ec8b94;
  --accent-soft: rgba(236, 111, 141, 0.16);
  --accent-softer: rgba(236, 111, 141, 0.09);
  --accent-ring: rgba(236, 111, 141, 0.4);
  --on-accent: #2c0a15;
}
:root[data-dark][data-theme="sage-green"] {
  --accent: #96b982;
  --accent-2: #b4c489;
  --accent-soft: rgba(150, 185, 130, 0.16);
  --accent-softer: rgba(150, 185, 130, 0.09);
  --accent-ring: rgba(150, 185, 130, 0.4);
  --on-accent: #131c0e;
}
:root[data-dark][data-theme="midnight"] {
  --accent: #8d80ea;
  --accent-2: #a99ef0;
  --accent-soft: rgba(141, 128, 234, 0.16);
  --accent-softer: rgba(141, 128, 234, 0.09);
  --accent-ring: rgba(141, 128, 234, 0.4);
  --on-accent: #100b2b;
}

/* ==========================================================================
   Density
   ========================================================================== */
:root[data-compact] {
  --card-pad: 14px;
  --gutter: 14px;
  --sp-6: 18px;
  --sp-7: 24px;
}