/* ============================================================
   POINTPERSON — Design Tokens
   Source: design handoff bundle, mirrors application/lib/core/theme/app_colors.dart
   Fonts: Manrope (headlines) + Inter (body/labels) loaded via Google Fonts in Layout.tsx
   ============================================================ */

/* ── Base Color Palette ──────────────────────────────────── */
:root {
  /* Primary — deep petrol teal (was indigo #292d64) */
  --color-primary: #123b40;
  --color-on-primary: #ffffff;
  --color-primary-container: #1f5b61;
  --color-on-primary-container: #a7dde2;
  --color-inverse-primary: #80d4dc;

  /* Secondary — mid petrol teal (was indigo #4858ab) */
  --color-secondary: #1f6e74;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #8fd2d8;
  --color-on-secondary-container: #0c4a4f;

  /* Tertiary — dark gray */
  --color-tertiary: #2f333c;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #464953;
  --color-on-tertiary-container: #b6b8c4;

  /* Error */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Surface scale — light mode */
  --color-surface: #f8f9fa;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #46464f;
  --color-surface-dim: #d9dadb;
  --color-surface-bright: #f8f9fa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f5;
  --color-surface-container: #edeeef;
  --color-surface-container-high: #e7e8e9;
  --color-surface-container-highest: #e1e3e4;

  /* Outline */
  --color-outline: #777680;
  --color-outline-variant: #c7c5d1;

  /* Inverse */
  --color-inverse-surface: #2e3132;
  --color-on-inverse-surface: #f0f1f2;
  --color-surface-tint: #2f7e85;

  /* ── Claim Signal — the most important semantic color ───────
     Answers "is this on me?" Green = yes, I own this. */
  --color-claimed: #2e7d50;
  --color-claimed-light: #e8f5ee;
  --color-claimed-on: #ffffff;
  --color-claimed-text: #1b5e36;

  /* ── Event Status Palette ─────────────────────────────────── */

  /* Happening now — warm red */
  --status-now: #c84a3a;
  --status-now-container: #fbe2dc;
  --status-on-now-container: #7e2418;

  /* Open — unclaimed, needs someone */
  --status-open: #a6741a;
  --status-open-container: #f7ebce;
  --status-on-open-container: #5e4108;
  --status-on-open: #ffffff;

  /* Plan — the brand teal (= --color-secondary): recurring series, planning
     cards, "find a time". The Flutter app's AppColors.going* family. */
  --status-plan: var(--color-secondary);
  --status-plan-container: #e2f3f4;
  --status-plan-border: #c2e2e4;
  --status-on-plan-container: #134347;

  /* Mine — current user has claimed */
  --status-mine: var(--color-claimed);
  --status-mine-container: var(--color-claimed-light);
  --status-on-mine-container: var(--color-claimed-text);

  /* Theirs — claimed by another household member */
  --status-theirs: #5e6b82;
  --status-theirs-container: #e5e9ef;
  --status-on-theirs-container: #374252;
  --status-on-theirs: #ffffff;

  /* Finished — past events, muted */
  --status-finished: #5c5f66;
  --status-finished-container: #edeeef;
  --status-on-finished-container: #46464f;

  /* Declined — you said no */
  --status-declined: #5c5f66;
  --status-declined-container: #e1e3e4;
  --status-on-declined-container: #46464f;

  /* ── Group role badges ──────────────────────────────────────
     Mirrors AppColors.role* so a badge reads the same on both surfaces. */
  --role-owner-bg: #123b40;
  --role-owner-fg: #ffffff;
  --role-admin-bg: #cfe8ea;
  --role-admin-fg: #0c4a4f;
  --role-user-bg: #e7e8e9;
  --role-user-fg: #46464f;
  --role-employee-bg: #d3ebda;
  --role-employee-fg: #1b5e36;

  /* ── Idea priority ─────────────────────────────────────────
     How much an idea matters to someone: 1 Whenever, 2 Soon,
     3 Important. Level 0 (No opinion) has no colour. */
  --idea-priority-1: #777680;
  --idea-priority-2: #b45309;
  --idea-priority-3: #ba1a1a;

  /* ── Find-a-time heatmap ──────────────────────────────────
     5-shade density ramp for the Find-a-Time wizard preset.
     Two anchors map to existing tokens (full-free → claimed,
     fully-busy → status-declined-container); the three
     in-between shades are heatmap-specific. Same hex values in
     light and dark — the heatmap is a fixed gradient like the
     brand panel and sky chips, so it stays readable in both
     modes without per-mode overrides.

     Cross-platform: see missing_slice/003 — the Flutter app
     hardcodes these three values in find_a_time_logic.dart
     and should adopt the matching tokens in app_colors.dart. */
  --heat-full: var(--color-claimed); /* avail = total */
  --heat-high: #3fa66a; /* avail >= 75% */
  --heat-mid: #c9a45e; /* avail >= 50% */
  --heat-low: #e8c088; /* avail >  0   */
  --heat-busy: var(--status-declined-container); /* avail =  0   */

  /* ── Group Palette ─────────────────────────────────────────
     The six-swatch palette used by the group color picker and
     anywhere a group is rendered with its brand color. Keep in
     sync with the other copies of this palette (same hex values,
     same order):
       - GROUP_COLOR_PALETTE in website/src/app/components/groupForm.ts
       - palette in backend/go/internal/groups/core.go
       - AppColors.groupPalette in application/lib/core/theme/app_colors.dart
     Same hex values in both light and dark mode for cross-mode parity. */
  --group-color-1: #1f6e74; /* teal */
  --group-color-2: #2b6585; /* blue */
  --group-color-3: #2e7d50; /* green */
  --group-color-4: #9c6b1f; /* ochre */
  --group-color-5: #a85a3c; /* terracotta */
  --group-color-6: #7a5aa6; /* violet */

  /* ── Brand Panel (login splash, marketing splashes) ───────
     Self-contained, always-dark visual story. Values do NOT
     change between light and dark mode — this is a fixed
     gradient panel, the same exception applied to the sidebar
     tokens and to AppColors.sky* in the Flutter app. */
  --brand-panel-bg-1: #123b40;
  --brand-panel-bg-2: #0d2c30;
  --brand-panel-bg-3: #08191c;
  --brand-panel-fg: #ffffff;
  --brand-panel-blob-glow: #7ec4f0;
  --brand-panel-ring: #0e2629;
  --brand-panel-text-mine: #9be0b6;
  --brand-panel-text-theirs: #cdd4de;
  --brand-panel-text-open: #f4d89a;
  --brand-panel-cta-text: #cdebd6;

  /* ── Sky zones (time of day) ─────────────────────────────────
     Mirrors AppColors.skyZone* — the app's Zone.zones table: night 0–5,
     morning 5–12, afternoon 12–18, evening 18–22, night 22–24. Same values
     in light and dark, like the sky in the app; read by src/lib/sky-gradient.ts
     (SkyChip) and the wizard's .ee-range-sky slider. */
  --sky-zone-night-start: #0f172a;
  --sky-zone-night-end: #1e2a5e;
  --sky-zone-night-text: #c7d2fe;
  --sky-zone-morning-start: #fbbf24;
  --sky-zone-morning-end: #f97316;
  --sky-zone-morning-text: #7c2d12;
  --sky-zone-afternoon-start: #38bdf8;
  --sky-zone-afternoon-end: #818cf8;
  --sky-zone-afternoon-text: #1e3a5f;
  --sky-zone-evening-start: #7c3aed;
  --sky-zone-evening-end: #db2777;
  --sky-zone-evening-text: #fce7f3;

  /* ── Semantic aliases ────────────────────────────────── */
  --color-bg: var(--color-surface);
  --color-card: var(--color-surface-container-lowest);
  --color-card-elevated: var(--color-surface-container-low);
  --color-text-primary: var(--color-on-surface);
  --color-text-secondary: var(--color-on-surface-variant);
  --color-text-disabled: var(--color-outline);
  --color-border: var(--color-outline);
  --color-border-subtle: var(--color-outline-variant);
  --color-interactive: var(--color-primary);
  --color-interactive-text: var(--color-primary);

  /* ── Navy Sidebar (web app) ─────────────────────────────────
     Self-contained palette for the left nav. In light mode the
     sidebar is a saturated brand-navy fill with white-alpha
     overlays; in dark mode it drops BELOW the page surface
     (deepest container) with brand-indigo-container tints for
     active state. */
  --sidebar-bg: var(--color-primary);
  --sidebar-fg: rgba(255, 255, 255, 0.92);
  --sidebar-fg-mute: rgba(255, 255, 255, 0.55);
  --sidebar-hover: rgba(255, 255, 255, 0.10);
  --sidebar-active: rgba(255, 255, 255, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-input-bg: rgba(0, 0, 0, 0.18);
  --sidebar-input-border: rgba(255, 255, 255, 0.08);
  --sidebar-create-bg: rgba(255, 255, 255, 0.16);
  --sidebar-create-border: rgba(255, 255, 255, 0.20);
  --sidebar-kbd-bg: rgba(255, 255, 255, 0.18);
  --sidebar-kbd-fg: rgba(255, 255, 255, 0.85);
  --sidebar-kbd-border: rgba(255, 255, 255, 0.10);
  --sidebar-brand-fg: #ffffff;
  --sidebar-brand-icon-bg: #ffffff;
}

/* ── Dark mode tokens ─────────────────────────────────────
   Applied two ways:
     1. Automatically via prefers-color-scheme (OS preference).
     2. Manually via [data-theme="dark"] (future toggle support).
   The two are kept in sync. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #80d4dc;
    --color-on-primary: #00363b;
    --color-primary-container: #1f5b61;
    --color-on-primary-container: #b7e9ee;
    --color-inverse-primary: #123b40;

    --color-secondary: #7fd4da;
    --color-on-secondary: #003237;
    --color-secondary-container: #1d6168;
    --color-on-secondary-container: #b3eef2;

    --color-tertiary: #c8c9d6;
    --color-on-tertiary: #30333d;
    --color-tertiary-container: #464953;
    --color-on-tertiary-container: #e4e6f3;

    --color-error: #ffb4ab;
    --color-on-error: #690005;
    --color-error-container: #93000a;
    --color-on-error-container: #ffdad6;

    --color-surface: #131316;
    --color-on-surface: #e3e2e6;
    --color-on-surface-variant: #c6c5d0;
    --color-surface-dim: #131316;
    --color-surface-bright: #3a3a3e;
    --color-surface-container-lowest: #0e0e10;
    --color-surface-container-low: #1c1b1f;
    --color-surface-container: #201f23;
    --color-surface-container-high: #2a292d;
    --color-surface-container-highest: #353438;

    --color-outline: #908f99;
    --color-outline-variant: #46464f;

    --color-inverse-surface: #e3e2e6;
    --color-on-inverse-surface: #2e3132;
    --color-surface-tint: #80d4dc;

    --color-claimed: #7dcfa0;
    --color-claimed-light: #16382a;
    --color-claimed-on: #0e2a1a;
    --color-claimed-text: #b8e8c8;

    --status-now: #f09b8f;
    --status-now-container: #4a1f18;
    --status-on-now-container: #f5c3b8;

    --status-open: #e0b870;
    --status-open-container: #3d2d0a;
    --status-on-open-container: #f4d89a;
    --status-on-open: #0f1115;

    --status-plan: var(--color-secondary);
    --status-plan-container: #0f2e30;
    --status-plan-border: #1f4f52;
    --status-on-plan-container: #b3eef2;

    --status-mine: var(--color-claimed);
    --status-mine-container: var(--color-claimed-light);
    --status-on-mine-container: var(--color-claimed-text);

    --status-theirs: #a4b0c5;
    --status-theirs-container: #2a3140;
    --status-on-theirs-container: #cdd4de;
    --status-on-theirs: #2a3140;

    --status-finished: #9b9da5;
    --status-finished-container: #201f23;
    --status-on-finished-container: #c6c5d0;

    --status-declined: #9b9da5;
    --status-declined-container: #2a292d;
    --status-on-declined-container: #c6c5d0;

    --role-owner-bg: #1f5b61;
    --role-owner-fg: #c8eef2;
    --role-admin-bg: #143a3e;
    --role-admin-fg: #a7dde2;
    --role-user-bg: #353438;
    --role-user-fg: #c6c5d0;
    --role-employee-bg: #16382a;
    --role-employee-fg: #b8e8c8;

    --idea-priority-1: #8a8b94;
    --idea-priority-2: #f5b342;
    --idea-priority-3: #ff6b6b;

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.40);
    --shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.30);

    /* Navy Sidebar — dark overrides */
    --sidebar-bg: var(--color-surface-container-lowest);
    --sidebar-fg: var(--color-on-surface);
    --sidebar-fg-mute: var(--color-on-surface-variant);
    --sidebar-hover: var(--color-surface-container);
    --sidebar-active: var(--color-primary-container);
    --sidebar-active-fg: var(--color-on-primary-container);
    --sidebar-border: var(--color-outline-variant);
    --sidebar-input-bg: var(--color-surface-container);
    --sidebar-input-border: var(--color-outline-variant);
    --sidebar-create-bg: var(--color-primary-container);
    --sidebar-create-border: var(--color-outline-variant);
    --sidebar-kbd-bg: var(--color-surface-container-high);
    --sidebar-kbd-fg: var(--color-on-surface);
    --sidebar-kbd-border: var(--color-outline-variant);
    --sidebar-brand-fg: var(--color-on-surface);
    --sidebar-brand-icon-bg: var(--sidebar-bg);
  }
}

[data-theme="dark"] {
  --color-primary: #80d4dc;
  --color-on-primary: #00363b;
  --color-primary-container: #1f5b61;
  --color-on-primary-container: #b7e9ee;
  --color-inverse-primary: #123b40;

  --color-secondary: #7fd4da;
  --color-on-secondary: #003237;
  --color-secondary-container: #1d6168;
  --color-on-secondary-container: #b3eef2;

  --color-tertiary: #c8c9d6;
  --color-on-tertiary: #30333d;
  --color-tertiary-container: #464953;
  --color-on-tertiary-container: #e4e6f3;

  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  --color-surface: #131316;
  --color-on-surface: #e3e2e6;
  --color-on-surface-variant: #c6c5d0;
  --color-surface-dim: #131316;
  --color-surface-bright: #3a3a3e;
  --color-surface-container-lowest: #0e0e10;
  --color-surface-container-low: #1c1b1f;
  --color-surface-container: #201f23;
  --color-surface-container-high: #2a292d;
  --color-surface-container-highest: #353438;

  --color-outline: #908f99;
  --color-outline-variant: #46464f;

  --color-inverse-surface: #e3e2e6;
  --color-on-inverse-surface: #2e3132;
  --color-surface-tint: #80d4dc;

  --color-claimed: #7dcfa0;
  --color-claimed-light: #16382a;
  --color-claimed-on: #0e2a1a;
  --color-claimed-text: #b8e8c8;

  --status-now: #f09b8f;
  --status-now-container: #4a1f18;
  --status-on-now-container: #f5c3b8;

  --status-open: #e0b870;
  --status-open-container: #3d2d0a;
  --status-on-open-container: #f4d89a;
  --status-on-open: #0f1115;

  --status-plan: var(--color-secondary);
  --status-plan-container: #0f2e30;
  --status-plan-border: #1f4f52;
  --status-on-plan-container: #b3eef2;

  --status-mine: var(--color-claimed);
  --status-mine-container: var(--color-claimed-light);
  --status-on-mine-container: var(--color-claimed-text);

  --status-theirs: #a4b0c5;
  --status-theirs-container: #2a3140;
  --status-on-theirs-container: #cdd4de;
  --status-on-theirs: #2a3140;

  --status-finished: #9b9da5;
  --status-finished-container: #201f23;
  --status-on-finished-container: #c6c5d0;

  --status-declined: #9b9da5;
  --status-declined-container: #2a292d;
  --status-on-declined-container: #c6c5d0;

  --role-owner-bg: #1f5b61;
  --role-owner-fg: #c8eef2;
  --role-admin-bg: #143a3e;
  --role-admin-fg: #a7dde2;
  --role-user-bg: #353438;
  --role-user-fg: #c6c5d0;
  --role-employee-bg: #16382a;
  --role-employee-fg: #b8e8c8;

  --idea-priority-1: #8a8b94;
  --idea-priority-2: #f5b342;
  --idea-priority-3: #ff6b6b;

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.40);
  --shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.30);

  /* Navy Sidebar — dark overrides */
  --sidebar-bg: var(--color-surface-container-lowest);
  --sidebar-fg: var(--color-on-surface);
  --sidebar-fg-mute: var(--color-on-surface-variant);
  --sidebar-hover: var(--color-surface-container);
  --sidebar-active: var(--color-primary-container);
  --sidebar-active-fg: var(--color-on-primary-container);
  --sidebar-border: var(--color-outline-variant);
  --sidebar-input-bg: var(--color-surface-container);
  --sidebar-input-border: var(--color-outline-variant);
  --sidebar-create-bg: var(--color-primary-container);
  --sidebar-create-border: var(--color-outline-variant);
  --sidebar-kbd-bg: var(--color-surface-container-high);
  --sidebar-kbd-fg: var(--color-on-surface);
  --sidebar-kbd-border: var(--color-outline-variant);
  --sidebar-brand-fg: var(--color-on-surface);
  --sidebar-brand-icon-bg: var(--sidebar-bg);
}

/* ── Typography Scale ────────────────────────────────────── */
:root {
  --font-headline: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;

  --text-headline-large-size: 24px;
  --text-headline-large-weight: 800;
  --text-headline-large-lh: 1.25;

  --text-headline-medium-size: 20px;
  --text-headline-medium-weight: 800;
  --text-headline-medium-lh: 1.3;

  --text-headline-small-size: 18px;
  --text-headline-small-weight: 700;
  --text-headline-small-lh: 1.3;

  --text-title-large-size: 16px;
  --text-title-large-weight: 600;
  --text-title-large-lh: 1.4;

  --text-title-medium-size: 14px;
  --text-title-medium-weight: 600;
  --text-title-medium-lh: 1.4;

  --text-title-small-size: 12px;
  --text-title-small-weight: 600;
  --text-title-small-lh: 1.4;

  --text-body-large-size: 16px;
  --text-body-large-weight: 400;
  --text-body-large-lh: 1.5;

  --text-body-medium-size: 14px;
  --text-body-medium-weight: 400;
  --text-body-medium-lh: 1.5;

  --text-body-small-size: 12px;
  --text-body-small-weight: 400;
  --text-body-small-lh: 1.5;

  --text-label-large-size: 14px;
  --text-label-large-weight: 700;
  --text-label-large-lh: 1.2;

  --text-label-medium-size: 12px;
  --text-label-medium-weight: 600;
  --text-label-medium-lh: 1.2;

  --text-label-small-size: 10px;
  --text-label-small-weight: 700;
  --text-label-small-lh: 1.2;
  --text-label-small-spacing: 0.5px;
}

/* ── Spacing Scale ───────────────────────────────────────── */
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
}

/* ── Corner Radii ────────────────────────────────────────── */
:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}

/* ── Beta banner (components/BetaBanner.tsx, above every page) ──
   A layout pinned to the window's height sizes itself to what the banner
   leaves, or the page scrolls by the banner and its bottom edge sits
   off-screen. */
:root {
  --beta-banner-height: 32px;
  --viewport-height-under-banner: calc(100vh - var(--beta-banner-height));
}

/* ── Shadows (light defaults; dark mode overrides above) ─── */
:root {
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* ── Responsive breakpoints (Material 3 window size classes) ──
   Single numeric source of truth: website/src/breakpoints.ts. A CSS @media
   query CANNOT read a var() in its condition, so the literal 600px / 840px must
   ALSO be written directly in each media rule (see app.css `.app-main` and the
   sidebar collapse). Keep those literals in sync with these vars AND with
   breakpoints.ts. Scale: compact < 600, medium 600–839, expanded >= 840. */
:root {
  --bp-medium: 600px; /* compact → medium: sidebar force-collapses below this */
  --bp-expanded: 840px; /* medium → expanded: multi-column /app layouts stack below */
}

/* ── Overlay scrims (modal / slide-over backdrops) ────────
   Mode-invariant: a near-black scrim dims both light and dark content, so no
   dark-mode override is needed. */
:root {
  --color-scrim: rgba(15, 16, 25, 0.45); /* modal backdrop */
  --color-scrim-soft: rgba(15, 16, 25, 0.25); /* slide-over backdrop */
}

/* ── Form focus ring (used by all pages) ─────────────────── */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--color-primary) 20%, transparent);
  outline: none;
}