/*
 * Planner design tokens — the single source for colors, scales, elevation,
 * glass recipes, layering and motion. Import before every other stylesheet.
 *
 * Layers:
 *   1. Primitives (`--pl-rgb-*`, `--pl-color-*`): theme-invariant raw values.
 *      `--pl-rgb-*` are space-separated channels so any alpha can be expressed
 *      exactly: `rgb(var(--pl-rgb-ink) / 0.72)`.
 *   2. Scales: radius, spacing, type, weight, leading, tracking, elevation,
 *      blur, z-index layers, motion.
 *   3. Semantic tokens (`--pl-surface-*`, `--pl-text-*`, `--pl-border-*`,
 *      `--pl-accent*`, status colors): flip between light and dark themes via
 *      `:root[data-planner-theme='dark']`.
 *   4. Legacy aliases (`--planner-*`) in global.css point at these tokens.
 *
 * New CSS must use semantic tokens first, then scales, then primitives.
 * See docs/design-system.md.
 */

:root {
  /* ---- 1. Primitive channels (theme-invariant) ---- */
  --pl-rgb-white: 255 255 255;
  --pl-rgb-ink: 20 33 61;              /* #14213d  light primary text */
  --pl-rgb-ink-shadow: 18 40 68;       /* #122844  light shadow tint */
  --pl-rgb-navy: 15 76 129;            /* #0f4c81  brand navy (borders, tints, titles) */
  --pl-rgb-navy-strong: 20 84 135;     /* #145487  accent strong */
  --pl-rgb-blue: 45 121 191;           /* #2d79bf  light accent */
  --pl-rgb-blue-soft: 104 165 224;     /* #68a5e0  dark accent */
  --pl-rgb-glow: 111 188 255;          /* #6fbcff  laser glow */
  --pl-rgb-glow-alt: 82 176 255;       /* #52b0ff  secondary glow */
  --pl-rgb-pin: 85 191 255;            /* #55bfff  map pin fill */
  --pl-rgb-snow: 238 246 255;          /* #eef6ff  dark primary text / pale blue fill */
  --pl-rgb-snow-soft: 248 251 255;     /* #f8fbff */
  --pl-rgb-pale-accent: 216 235 255;   /* #d8ebff */
  --pl-rgb-body-dark: 229 237 247;     /* #e5edf7  dark body text */
  --pl-rgb-slate-200: 226 232 240;     /* #e2e8f0  dark secondary text */
  --pl-rgb-slate-400: 148 163 184;     /* #94a3b8  dark borders */
  --pl-rgb-night-900: 10 18 30;        /* #0a121e  dark glass */
  --pl-rgb-night-850: 12 21 34;        /* #0c1522  dark glass strong */
  --pl-rgb-night-800: 15 23 36;        /* #0f1724  dark card */
  --pl-rgb-night-750: 15 23 42;        /* #0f172a  dark inset */
  --pl-rgb-night-shadow: 2 6 23;       /* #020617  dark shadow tint */
  --pl-rgb-red: 201 42 42;             /* #c92a2a  danger / cross-day alert */
  --pl-rgb-red-soft: 255 155 151;      /* #ff9b97 */
  --pl-rgb-green: 47 158 98;           /* #2f9e62 */
  --pl-rgb-green-soft: 134 239 172;    /* #86efac */
  --pl-rgb-green-text: 31 122 74;      /* #1f7a4a  success as light text (AA) */
  --pl-rgb-amber: 169 115 0;           /* #a97300 */
  --pl-rgb-amber-soft: 253 230 138;    /* #fde68a */
  --pl-rgb-amber-text: 138 93 0;       /* #8a5d00  warning as light text (AA) */
  --pl-rgb-orange: 217 107 65;         /* #d96b41  warm accent (graphics) */
  --pl-rgb-orange-text: 180 83 42;     /* #b4532a  warm accent as text (AA) */
  --pl-rgb-orange-soft: 243 156 115;   /* #f39c73 */
  --pl-rgb-teal: 45 212 191;           /* #2dd4bf  status console accent */

  --pl-color-white: rgb(var(--pl-rgb-white));
  --pl-color-ink: rgb(var(--pl-rgb-ink));
  --pl-color-navy: rgb(var(--pl-rgb-navy));
  --pl-color-navy-strong: rgb(var(--pl-rgb-navy-strong));
  --pl-color-blue: rgb(var(--pl-rgb-blue));
  --pl-color-blue-soft: rgb(var(--pl-rgb-blue-soft));
  --pl-color-glow: rgb(var(--pl-rgb-glow));
  --pl-color-snow: rgb(var(--pl-rgb-snow));
  --pl-color-red: rgb(var(--pl-rgb-red));
  --pl-color-green: rgb(var(--pl-rgb-green));
  --pl-color-amber: rgb(var(--pl-rgb-amber));
  --pl-color-orange: rgb(var(--pl-rgb-orange));

  /* ---- 2. Scales ---- */

  /* Radius (aligned with the Mantine theme radius scale) */
  --pl-radius-xs: 10px;
  --pl-radius-sm: 14px;
  --pl-radius-md: 18px;
  --pl-radius-lg: 22px;
  --pl-radius-xl: 28px;
  --pl-radius-pill: 999px;
  --pl-radius-round: 50%;
  --pl-radius-panel: calc(24px * var(--planner-ui-scale, 1));

  /* Spacing: 4px grid, scaled with the responsive space scale. Use for new
   * layout code; legacy raw px values are migrated case by case. */
  --pl-space-0-5: calc(2px * var(--planner-space-scale, 1));
  --pl-space-1: calc(4px * var(--planner-space-scale, 1));
  --pl-space-1-5: calc(6px * var(--planner-space-scale, 1));
  --pl-space-2: calc(8px * var(--planner-space-scale, 1));
  --pl-space-2-5: calc(10px * var(--planner-space-scale, 1));
  --pl-space-3: calc(12px * var(--planner-space-scale, 1));
  --pl-space-3-5: calc(14px * var(--planner-space-scale, 1));
  --pl-space-4: calc(16px * var(--planner-space-scale, 1));
  --pl-space-5: calc(20px * var(--planner-space-scale, 1));
  --pl-space-6: calc(24px * var(--planner-space-scale, 1));
  --pl-space-8: calc(32px * var(--planner-space-scale, 1));

  /* Type: rem already follows --planner-font-scale through :root font-size.
   * Never multiply rem by --planner-font-scale again. */
  --pl-font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --pl-font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  --pl-text-2xs: 0.64rem;
  --pl-text-xs: 0.7rem;
  --pl-text-sm: 0.76rem;
  --pl-text-md: 0.84rem;
  --pl-text-base: 0.92rem;
  --pl-text-lg: 1rem;
  --pl-text-xl: 1.2rem;
  --pl-text-2xl: 1.5rem;
  --pl-text-3xl: 2rem;
  --pl-weight-regular: 400;
  --pl-weight-medium: 600;
  --pl-weight-bold: 700;
  --pl-weight-heavy: 800;
  --pl-weight-black: 900;
  --pl-leading-none: 1;
  --pl-leading-tight: 1.2;
  --pl-leading-snug: 1.35;
  --pl-leading-normal: 1.5;
  --pl-leading-relaxed: 1.6;
  --pl-tracking-tight: -0.03em;
  --pl-tracking-wide: 0.02em;
  --pl-tracking-kicker: 0.08em;

  /* Control sizes */
  --pl-control-xs: 30px;
  --pl-control-sm: 34px;
  --pl-control-md: 40px;
  --pl-control-lg: 48px;

  /* Blur recipes (backdrop-filter values) */
  --pl-blur-control: blur(14px) saturate(1.15);
  --pl-blur-card: blur(18px) saturate(1.1);
  --pl-blur-panel: blur(20px) saturate(1.18);
  --pl-blur-menu: blur(22px) saturate(1.2);
  --pl-blur-dialog: blur(24px) saturate(1.2);

  /* Z-index layers. Keep every new stacking context on one of these. */
  --pl-z-base: 1;
  --pl-z-raised: 5;
  --pl-z-shell: 10;
  --pl-z-shell-floating: 50;
  --pl-z-dropdown: 500;
  --pl-z-overlay: 1000;
  --pl-z-modal: 1100;
  --pl-z-popover: 1200;
  --pl-z-tooltip: 1600;
  --pl-z-blocking: 10000;
  --pl-z-launch: 11000;
  --pl-z-critical: 12000;

  /* Motion */
  --pl-duration-instant: 120ms;
  --pl-duration-fast: 160ms;
  --pl-duration-base: 220ms;
  --pl-duration-slow: 340ms;
  --pl-duration-emphasis: 520ms;
  --pl-ease-standard: ease;
  --pl-ease-in-out: ease-in-out;
  --pl-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);

  /* Breakpoints (reference only — CSS media queries cannot read variables):
   * sm 560px · md 720px · lg 960px (primary) · xl 1200px · 2xl 1450px */

  /* ---- 3. Semantic tokens: light theme (default) ---- */
  --pl-bg-app:
    radial-gradient(circle at top left, rgb(var(--pl-rgb-navy) / 0.16), transparent 24%),
    linear-gradient(135deg, #f4f7fb 0%, #e8eef6 100%);

  --pl-surface-glass: rgb(var(--pl-rgb-white) / 0.72);
  --pl-surface-glass-strong: rgb(var(--pl-rgb-white) / 0.86);
  --pl-surface-card: rgb(var(--pl-rgb-white) / 0.58);
  --pl-surface-solid: rgb(var(--pl-rgb-white) / 0.94);
  --pl-surface-inset: rgb(var(--pl-rgb-white) / 0.82);
  --pl-surface-hover: rgb(var(--pl-rgb-navy) / 0.08);
  --pl-surface-selected: rgb(var(--pl-rgb-navy) / 0.12);
  --pl-surface-scrim: rgb(var(--pl-rgb-ink) / 0.28);

  --pl-border-glass: rgb(var(--pl-rgb-white) / 0.68);
  --pl-border-subtle: rgb(var(--pl-rgb-navy) / 0.14);
  --pl-border-strong: rgb(var(--pl-rgb-ink) / 0.28);

  --pl-text-primary: rgb(var(--pl-rgb-ink));
  --pl-text-secondary: rgb(var(--pl-rgb-ink) / 0.72);
  --pl-text-tertiary: rgb(var(--pl-rgb-ink) / 0.62);
  --pl-text-disabled: rgb(var(--pl-rgb-ink) / 0.38);
  --pl-text-brand: rgb(var(--pl-rgb-navy));
  --pl-text-on-accent: rgb(var(--pl-rgb-white));
  --pl-text-warm: rgb(var(--pl-rgb-orange-text));

  --pl-accent: rgb(var(--pl-rgb-blue));
  --pl-accent-strong: rgb(var(--pl-rgb-navy-strong));
  --pl-accent-emphasis-text: rgb(var(--pl-rgb-navy-strong));
  --pl-accent-tint: rgb(var(--pl-rgb-navy) / 0.08);
  --pl-warm: rgb(var(--pl-rgb-orange));
  --pl-glow: rgb(var(--pl-rgb-glow) / 0.88);
  --pl-glow-soft: rgb(var(--pl-rgb-glow) / 0.28);

  --pl-success: rgb(var(--pl-rgb-green-text));
  --pl-success-bg: rgb(var(--pl-rgb-green) / 0.12);
  --pl-warning: rgb(var(--pl-rgb-amber-text));
  --pl-warning-bg: rgb(224 180 35 / 0.16);
  --pl-danger: rgb(var(--pl-rgb-red));
  --pl-danger-bg: rgb(var(--pl-rgb-red) / 0.1);
  --pl-alert-crossday: var(--pl-danger);

  --pl-shadow-rgb: var(--pl-rgb-ink-shadow);
  --pl-elevation-1: 0 6px 14px rgb(var(--pl-shadow-rgb) / 0.12);
  --pl-elevation-2: 0 10px 22px rgb(var(--pl-shadow-rgb) / 0.12);
  --pl-elevation-3: 0 18px 45px rgb(var(--pl-shadow-rgb) / 0.12);
  --pl-elevation-4: 0 22px 60px rgb(var(--pl-shadow-rgb) / 0.16);
  --pl-inset-highlight: inset 0 1px 0 rgb(var(--pl-rgb-white) / 0.72);
  --pl-glow-ring: 0 0 0 1px rgb(var(--pl-rgb-glow) / 0.18), 0 0 18px rgb(var(--pl-rgb-glow) / 0.26);

  --pl-focus-color: rgb(var(--pl-rgb-glow) / 0.9);
  --pl-focus-ring: 0 0 0 2px var(--pl-surface-glass-strong), 0 0 0 4px rgb(var(--pl-rgb-glow) / 0.72);
}

/* ---- 3b. Semantic tokens: dark theme ---- */
:root[data-planner-theme='dark'] {
  --pl-bg-app: #08111f;

  --pl-surface-glass: rgb(var(--pl-rgb-night-900) / 0.64);
  --pl-surface-glass-strong: rgb(var(--pl-rgb-night-850) / 0.78);
  --pl-surface-card: rgb(var(--pl-rgb-night-800) / 0.62);
  --pl-surface-solid: rgb(var(--pl-rgb-night-900) / 0.96);
  --pl-surface-inset: rgb(var(--pl-rgb-night-750) / 0.72);
  --pl-surface-hover: rgb(var(--pl-rgb-blue-soft) / 0.1);
  --pl-surface-selected: rgb(var(--pl-rgb-blue-soft) / 0.16);
  --pl-surface-scrim: rgb(var(--pl-rgb-night-shadow) / 0.56);

  --pl-border-glass: rgb(var(--pl-rgb-slate-400) / 0.18);
  --pl-border-subtle: rgb(var(--pl-rgb-slate-400) / 0.15);
  --pl-border-strong: rgb(var(--pl-rgb-slate-400) / 0.28);

  --pl-text-primary: rgb(var(--pl-rgb-snow));
  --pl-text-secondary: rgb(var(--pl-rgb-slate-200) / 0.78);
  --pl-text-tertiary: rgb(var(--pl-rgb-slate-200) / 0.62);
  --pl-text-disabled: rgb(var(--pl-rgb-slate-200) / 0.4);
  --pl-text-brand: rgb(var(--pl-rgb-pale-accent));
  --pl-text-warm: rgb(var(--pl-rgb-orange-soft));

  --pl-accent: rgb(var(--pl-rgb-blue-soft));
  --pl-accent-strong: rgb(var(--pl-rgb-pale-accent));
  --pl-accent-emphasis-text: rgb(var(--pl-rgb-pale-accent));
  --pl-accent-tint: rgb(var(--pl-rgb-blue-soft) / 0.12);
  --pl-warm: rgb(var(--pl-rgb-orange-soft));

  --pl-success: rgb(var(--pl-rgb-green-soft));
  --pl-success-bg: rgb(34 197 94 / 0.16);
  --pl-warning: rgb(var(--pl-rgb-amber-soft));
  --pl-warning-bg: rgb(180 83 9 / 0.16);
  --pl-danger: rgb(var(--pl-rgb-red-soft));
  --pl-danger-bg: rgb(92 18 25 / 0.42);

  --pl-shadow-rgb: var(--pl-rgb-night-shadow);
  --pl-elevation-4: 0 22px 60px rgb(var(--pl-shadow-rgb) / 0.45);
  --pl-inset-highlight: inset 0 1px 0 rgb(var(--pl-rgb-white) / 0.04);
}

/* ---- Global accessibility defaults ---- */

/* Zero-specificity fallback ring: any control without its own focus style
 * still shows keyboard focus. Component rules may override it. */
:where(a, button, input, select, textarea, summary, [role='button'], [role='tab'], [role='menuitem'], [role='option'], [tabindex]:not([tabindex='-1'])):focus-visible {
  outline: 2px solid var(--pl-focus-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pl-duration-instant: 0.01ms;
    --pl-duration-fast: 0.01ms;
    --pl-duration-base: 0.01ms;
    --pl-duration-slow: 0.01ms;
    --pl-duration-emphasis: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}