/*
  Design tokens for the planning app.
  Light theme is the default; dark theme applies via [data-theme="dark"]
  or prefers-color-scheme when no explicit theme has been chosen.
*/

:root {
  /* ---------- Base palette (light) ---------- */
  --color-bg: #f6f7fb;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #eef0f6;
  --color-bg-inset: #e9ebf3;
  --color-border: #dcdfea;
  --color-border-strong: #c3c8d9;

  --color-text: #1c2033;
  --color-text-muted: #5b6178;
  --color-text-faint: #8a90a6;
  --color-text-on-accent: #ffffff;

  --color-accent: #5b5fef;
  --color-accent-hover: #4a4edb;
  --color-accent-active: #3d40c4;
  --color-accent-subtle: #eceefe;
  --color-accent-text: #4144c9;

  --color-danger: #d9432f;
  --color-danger-hover: #c23a28;
  --color-danger-subtle: #fbeae7;

  --color-success: #1f9d63;
  --color-success-subtle: #e6f6ee;

  --color-warning: #b5790a;
  --color-warning-subtle: #fdf1dc;

  --color-info: #2b7fd6;
  --color-info-subtle: #e8f2fc;

  /* ---------- Attendance status colours ---------- */
  --status-available: #1f9d63;
  --status-available-bg: #e6f6ee;
  --status-available-border: #a9dec4;

  --status-maybe: #b5790a;
  --status-maybe-bg: #fdf1dc;
  --status-maybe-border: #f0cd8c;

  --status-unavailable: #d9432f;
  --status-unavailable-bg: #fbeae7;
  --status-unavailable-border: #efb6ab;

  --status-unanswered: #6b7086;
  --status-unanswered-bg: #eef0f6;
  --status-unanswered-border: #cdd1e0;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 3px rgba(21, 24, 43, 0.05), 0 1px 2px rgba(21, 24, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(21, 24, 43, 0.08), 0 2px 8px rgba(21, 24, 43, 0.04);
  --shadow-lg: 0 24px 60px rgba(21, 24, 43, 0.16), 0 8px 20px rgba(21, 24, 43, 0.08);
  --shadow-focus: 0 0 0 3px rgba(91, 95, 239, 0.35);

  /* ---------- Liquid glass surfaces ----------
     Two tiers: "glass" (blurred, for chrome that floats over the ambient
     background — header, nav, modals, dropdowns, toasts, hero panels) and
     "glass-lite" (translucent but unblurred, for densely repeated surfaces
     like list rows and cards, where stacking backdrop-filter on every node
     would cost real paint time for no visible benefit). */
  --glass-blur: 22px;
  --glass-saturate: 180%;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-lite: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 30px rgba(21, 24, 43, 0.10);
  --glass-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 28px 64px rgba(21, 24, 43, 0.18);

  /* ---------- Glow ----------
     Derived from the accent (or a passed-in colour) via color-mix, so a
     single definition works across both themes without duplication —
     color-mix re-reads whatever --color-accent resolves to at paint time. */
  --glow-accent-sm: 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 35%, transparent);
  --glow-accent: 0 0 24px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 0 64px color-mix(in srgb, var(--color-accent) 20%, transparent);
  --glow-accent-strong: 0 0 2px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 0 32px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 80px color-mix(in srgb, var(--color-accent) 30%, transparent);
  --spotlight-size: 320px;

  /* Status glows, same shape as the accent ones — used for confirmed /
     failed / pending affordances so a colour already carrying meaning also
     carries the light. */
  --glow-success: 0 0 18px color-mix(in srgb, var(--color-success) 40%, transparent);
  --glow-danger: 0 0 18px color-mix(in srgb, var(--color-danger) 40%, transparent);
  --glow-warning: 0 0 18px color-mix(in srgb, var(--color-warning) 40%, transparent);

  /* ---------- Gradients ----------
     Two hues that already exist in the palette, recombined. Used sparingly
     for the few "hero" numerals and wordmarks, never for body text. */
  --gradient-accent: linear-gradient(120deg, var(--color-accent-text), var(--color-info));
  --gradient-accent-solid: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-info) 65%, var(--color-accent)));

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- Typography ---------- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Layout ---------- */
  --container-max: 1120px;
  --header-height: 60px;
  --bottom-nav-height: 64px;
  /* The bottom dock now floats above the viewport edge (see .bottom-nav in
     layout.css) instead of sitting flush — anything else pinned to the
     bottom of the screen needs to clear the dock's height plus its floating
     margin plus a little breathing room, not just the bar's own height. */
  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-7));
  --sidebar-width: 260px;

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-index scale ---------- */
  --z-header: 100;
  --z-bottom-nav: 100;
  --z-dropdown: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14151f;
    --color-bg-elevated: #1c1e2b;
    --color-bg-subtle: #21232f;
    --color-bg-inset: #262838;
    --color-border: #333648;
    --color-border-strong: #454863;

    --color-text: #edeef5;
    --color-text-muted: #a9adc4;
    --color-text-faint: #7b7f98;
    --color-text-on-accent: #ffffff;

    --color-accent: #8b8ef8;
    --color-accent-hover: #a0a3fa;
    --color-accent-active: #7275e6;
    --color-accent-subtle: #262a4d;
    --color-accent-text: #b1b3fb;

    --color-danger: #f0685a;
    --color-danger-hover: #f47f72;
    --color-danger-subtle: #3a2020;

    --color-success: #3fc484;
    --color-success-subtle: #133527;

    --color-warning: #e0a63e;
    --color-warning-subtle: #3a2c10;

    --color-info: #62a9ef;
    --color-info-subtle: #16283b;

    --status-available: #3fc484;
    --status-available-bg: #133527;
    --status-available-border: #205a3f;

    --status-maybe: #e0a63e;
    --status-maybe-bg: #3a2c10;
    --status-maybe-border: #63481b;

    --status-unavailable: #f0685a;
    --status-unavailable-bg: #3a2020;
    --status-unavailable-border: #63332c;

    --status-unanswered: #9a9fbd;
    --status-unanswered-bg: #262838;
    --status-unanswered-border: #3d4058;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 3px rgba(139, 142, 248, 0.45);

    --glass-bg: rgba(28, 30, 43, 0.58);
    --glass-bg-strong: rgba(20, 21, 31, 0.76);
    --glass-bg-lite: rgba(33, 35, 47, 0.68);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 30px rgba(0, 0, 0, 0.45);
    --glass-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 28px 64px rgba(0, 0, 0, 0.55);
  }
}

/* Explicit theme override, set by the theme switcher via data-theme on <html> */
:root[data-theme="dark"] {
  --color-bg: #14151f;
  --color-bg-elevated: #1c1e2b;
  --color-bg-subtle: #21232f;
  --color-bg-inset: #262838;
  --color-border: #333648;
  --color-border-strong: #454863;

  --color-text: #edeef5;
  --color-text-muted: #a9adc4;
  --color-text-faint: #7b7f98;
  --color-text-on-accent: #ffffff;

  --color-accent: #8b8ef8;
  --color-accent-hover: #a0a3fa;
  --color-accent-active: #7275e6;
  --color-accent-subtle: #262a4d;
  --color-accent-text: #b1b3fb;

  --color-danger: #f0685a;
  --color-danger-hover: #f47f72;
  --color-danger-subtle: #3a2020;

  --color-success: #3fc484;
  --color-success-subtle: #133527;

  --color-warning: #e0a63e;
  --color-warning-subtle: #3a2c10;

  --color-info: #62a9ef;
  --color-info-subtle: #16283b;

  --status-available: #3fc484;
  --status-available-bg: #133527;
  --status-available-border: #205a3f;

  --status-maybe: #e0a63e;
  --status-maybe-bg: #3a2c10;
  --status-maybe-border: #63481b;

  --status-unavailable: #f0685a;
  --status-unavailable-bg: #3a2020;
  --status-unavailable-border: #63332c;

  --status-unanswered: #9a9fbd;
  --status-unanswered-bg: #262838;
  --status-unanswered-border: #3d4058;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px rgba(139, 142, 248, 0.45);

  --glass-bg: rgba(28, 30, 43, 0.58);
  --glass-bg-strong: rgba(20, 21, 31, 0.76);
  --glass-bg-lite: rgba(33, 35, 47, 0.68);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 30px rgba(0, 0, 0, 0.45);
  --glass-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 28px 64px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  --color-bg: #f6f7fb;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #eef0f6;
  --color-bg-inset: #e9ebf3;
  --color-border: #dcdfea;
  --color-border-strong: #c3c8d9;

  --color-text: #1c2033;
  --color-text-muted: #5b6178;
  --color-text-faint: #8a90a6;
  --color-text-on-accent: #ffffff;

  --color-accent: #5b5fef;
  --color-accent-hover: #4a4edb;
  --color-accent-active: #3d40c4;
  --color-accent-subtle: #eceefe;
  --color-accent-text: #4144c9;

  --color-danger: #d9432f;
  --color-danger-hover: #c23a28;
  --color-danger-subtle: #fbeae7;

  --color-success: #1f9d63;
  --color-success-subtle: #e6f6ee;

  --color-warning: #b5790a;
  --color-warning-subtle: #fdf1dc;

  --color-info: #2b7fd6;
  --color-info-subtle: #e8f2fc;

  --status-available: #1f9d63;
  --status-available-bg: #e6f6ee;
  --status-available-border: #a9dec4;

  --status-maybe: #b5790a;
  --status-maybe-bg: #fdf1dc;
  --status-maybe-border: #f0cd8c;

  --status-unavailable: #d9432f;
  --status-unavailable-bg: #fbeae7;
  --status-unavailable-border: #efb6ab;

  --status-unanswered: #6b7086;
  --status-unanswered-bg: #eef0f6;
  --status-unanswered-border: #cdd1e0;

  --shadow-sm: 0 1px 3px rgba(21, 24, 43, 0.05), 0 1px 2px rgba(21, 24, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(21, 24, 43, 0.08), 0 2px 8px rgba(21, 24, 43, 0.04);
  --shadow-lg: 0 24px 60px rgba(21, 24, 43, 0.16), 0 8px 20px rgba(21, 24, 43, 0.08);
  --shadow-focus: 0 0 0 3px rgba(91, 95, 239, 0.35);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-lite: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 30px rgba(21, 24, 43, 0.10);
  --glass-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 28px 64px rgba(21, 24, 43, 0.18);
}