/* =========================================================================
   PeopleWill — Design tokens
   The single source of truth for colour, type, space, radius, elevation
   and motion. See Doc/DESIGN_SYSTEM.md.

   RULE: never write a raw hex, px font-size or px gap anywhere else in the
   codebase. If a value you need is missing, add it here.

   Every text/background pair below is verified against WCAG 2.2 AA
   (4.5:1 body text, 3:1 for interactive component boundaries).
   Re-run `npm run test:contrast` after changing any colour.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Brand
     Deep teal reads civic and global without belonging to any political
     tradition. Warm amber is the single accent — used sparingly, for
     progress and impact, never for primary navigation.
     --------------------------------------------------------------------- */
  --pw-primary: #0b6560;
  --pw-primary-hover: #084e4a;
  --pw-primary-active: #063c39;
  --pw-primary-contrast: #ffffff;
  --pw-primary-tint: #e6f1f0;

  --pw-accent: #8a4b04;
  --pw-accent-hover: #6e3b03;
  --pw-accent-contrast: #ffffff;
  --pw-accent-tint: #fbf0dc;

  /* ---------------------------------------------------------------------
     Surfaces and text
     --------------------------------------------------------------------- */
  --pw-bg: #ffffff;
  --pw-bg-subtle: #f4f7f7;
  --pw-surface: #ffffff;
  --pw-surface-raised: #ffffff;
  --pw-surface-sunken: #edf1f1;

  --pw-text: #12211f; /* 16.63:1 on bg */
  --pw-text-secondary: #4c5f5d; /*  6.77:1 on bg */
  --pw-text-muted: #5e706e; /*  5.23:1 on bg — still AA, not a licence to grey things out */
  --pw-text-on-dark: #e7edec;

  /* Borders. `strong` is for anything a user can click, focus or type into
     (WCAG 1.4.11 requires 3:1). `subtle` is for decorative dividers only. */
  --pw-border-strong: #7e908e; /*  3.35:1 on bg */
  --pw-border: #dde4e3;
  --pw-border-subtle: #eaefee;

  /* ---------------------------------------------------------------------
     Feedback
     --------------------------------------------------------------------- */
  --pw-danger: #9b1c1c;
  --pw-danger-tint: #fbeaea;
  --pw-success: #1b5e37;
  --pw-success-tint: #e4f3e9;

  /* ---------------------------------------------------------------------
     Request status
     One pair per lifecycle state. Colour is never the only signal — every
     badge also carries text, and the timeline also carries an icon.
     --------------------------------------------------------------------- */
  --pw-status-new-fg: #3f4f4e;
  --pw-status-new-bg: #edf1f1;
  --pw-status-growing-fg: #1a4f8a;
  --pw-status-growing-bg: #e7f0fa;
  --pw-status-community-fg: #1a4f8a;
  --pw-status-community-bg: #e7f0fa;
  --pw-status-review-fg: #7a4a00;
  --pw-status-review-bg: #fbf0dc;
  --pw-status-planned-fg: #7a4a00;
  --pw-status-planned-bg: #fbf0dc;
  --pw-status-progress-fg: #4b3a9e;
  --pw-status-progress-bg: #eeebfa;
  --pw-status-impact-fg: #1b5e37;
  --pw-status-impact-bg: #e4f3e9;
  --pw-status-closed-fg: #54625f;
  --pw-status-closed-bg: #eff1f1;

  /* ---------------------------------------------------------------------
     Topic accents — all AA on --pw-bg as text, usable as icon fills
     --------------------------------------------------------------------- */
  --pw-topic-environment: #1f6b3b;
  --pw-topic-health: #a5324b;
  --pw-topic-education: #1a5b9e;
  --pw-topic-work: #7a4a00;
  --pw-topic-economy: #0b6560;
  --pw-topic-technology-ai: #4b3a9e;
  --pw-topic-rights: #8a3a6b;
  --pw-topic-government: #3f5468;
  --pw-topic-mobility: #0e6076;
  --pw-topic-housing: #8a4b04;
  --pw-topic-science: #2a5fa8;
  --pw-topic-peace-security: #2f6a57;

  /* ---------------------------------------------------------------------
     Typography
     System font stack: zero network cost, native rendering in every script,
     and no third-party origin to allow through CSP. Revisit only if the
     brand demands it — a webfont is a performance and privacy decision.
     --------------------------------------------------------------------- */
  --pw-font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --pw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale, 1.200 minor third. clamp() means no breakpoint jumps. */
  --pw-text-2xs: 0.75rem; /* 12px — legal/meta only */
  --pw-text-xs: 0.8125rem; /* 13px */
  --pw-text-sm: 0.875rem; /* 14px */
  --pw-text-base: 1rem; /* 16px — never smaller for body */
  --pw-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --pw-text-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --pw-text-2xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
  --pw-text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);

  --pw-leading-tight: 1.2;
  --pw-leading-snug: 1.35;
  --pw-leading-normal: 1.6;
  --pw-leading-relaxed: 1.75;

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

  --pw-tracking-tight: -0.015em;
  --pw-tracking-wide: 0.02em;

  /* Reading measure — long prose must not run the full width of a desktop. */
  --pw-measure: 68ch;

  /* ---------------------------------------------------------------------
     Space — 4px base, geometric-ish. Use these, never arbitrary px.
     --------------------------------------------------------------------- */
  --pw-space-0: 0;
  --pw-space-1: 0.25rem; /*  4px */
  --pw-space-2: 0.5rem; /*  8px */
  --pw-space-3: 0.75rem; /* 12px */
  --pw-space-4: 1rem; /* 16px */
  --pw-space-5: 1.5rem; /* 24px */
  --pw-space-6: 2rem; /* 32px */
  --pw-space-7: 3rem; /* 48px */
  --pw-space-8: 4rem; /* 64px */
  --pw-space-9: 6rem; /* 96px */

  /* ---------------------------------------------------------------------
     Radius, elevation, layout
     --------------------------------------------------------------------- */
  --pw-radius-sm: 4px;
  --pw-radius-md: 8px;
  --pw-radius-lg: 14px;
  --pw-radius-xl: 22px;
  --pw-radius-full: 999px;

  --pw-shadow-sm: 0 1px 2px rgb(18 33 31 / 0.06);
  --pw-shadow-md: 0 2px 4px rgb(18 33 31 / 0.06), 0 4px 12px rgb(18 33 31 / 0.07);
  --pw-shadow-lg: 0 4px 8px rgb(18 33 31 / 0.07), 0 12px 32px rgb(18 33 31 / 0.1);

  --pw-container-max: 1180px;
  --pw-container-narrow: 720px;
  --pw-gutter: var(--pw-space-4);

  /* Minimum interactive target. WCAG 2.2 AA requires 24px; 44px is the
     comfortable touch size and what we actually build to. */
  --pw-target-min: 44px;

  /* ---------------------------------------------------------------------
     Focus — a single ring definition, used everywhere. Never remove an
     outline without providing an equally visible replacement.
     --------------------------------------------------------------------- */
  --pw-focus-color: #0b6560;
  --pw-focus-width: 3px;
  --pw-focus-offset: 2px;

  /* ---------------------------------------------------------------------
     Motion. Every duration below is forced to 0.01ms under
     prefers-reduced-motion (see base.css) — so animate through these
     tokens, never with a hard-coded duration.
     --------------------------------------------------------------------- */
  --pw-duration-fast: 120ms;
  --pw-duration-base: 200ms;
  --pw-duration-slow: 360ms;
  --pw-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Stacking order — declared centrally so no one invents z-index: 9999. */
  --pw-z-base: 0;
  --pw-z-sticky: 100;
  --pw-z-header: 200;
  --pw-z-dropdown: 300;
  --pw-z-overlay: 400;
  --pw-z-modal: 500;
  --pw-z-toast: 600;
}

/* =========================================================================
   Dark theme
   Only token VALUES are redefined — never structure, never new names, so
   every component gets dark mode without touching component CSS.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pw-primary: #4fc7bb;
    --pw-primary-hover: #6fd6cc;
    --pw-primary-active: #8ae0d8;
    --pw-primary-contrast: #04211f;
    --pw-primary-tint: #123330;

    --pw-accent: #e8a24c;
    --pw-accent-hover: #f0b570;
    --pw-accent-contrast: #2a1a02;
    --pw-accent-tint: #2a2113;

    --pw-bg: #0d1414;
    --pw-bg-subtle: #111a19;
    --pw-surface: #151f1e;
    --pw-surface-raised: #1b2726;
    --pw-surface-sunken: #0a1010;

    --pw-text: #e7edec;
    --pw-text-secondary: #a6b5b3;
    --pw-text-muted: #93a29f;
    --pw-text-on-dark: #e7edec;

    --pw-border-strong: #687977;
    --pw-border: #2b3836;
    --pw-border-subtle: #212d2c;

    --pw-danger: #f08a8a;
    --pw-danger-tint: #331717;
    --pw-success: #7fcf9b;
    --pw-success-tint: #132618;

    --pw-status-new-fg: #c2cfcd;
    --pw-status-new-bg: #212d2c;
    --pw-status-growing-fg: #8fbef0;
    --pw-status-growing-bg: #16232f;
    --pw-status-community-fg: #8fbef0;
    --pw-status-community-bg: #16232f;
    --pw-status-review-fg: #e8b968;
    --pw-status-review-bg: #2a2113;
    --pw-status-planned-fg: #e8b968;
    --pw-status-planned-bg: #2a2113;
    --pw-status-progress-fg: #b0a4f5;
    --pw-status-progress-bg: #1f1b33;
    --pw-status-impact-fg: #7fcf9b;
    --pw-status-impact-bg: #132618;
    --pw-status-closed-fg: #a9b6b4;
    --pw-status-closed-bg: #1d2726;

    --pw-topic-environment: #6fcb8e;
    --pw-topic-health: #f08fa4;
    --pw-topic-education: #7fb6ee;
    --pw-topic-work: #e8b968;
    --pw-topic-economy: #4fc7bb;
    --pw-topic-technology-ai: #b0a4f5;
    --pw-topic-rights: #e79ac9;
    --pw-topic-government: #a8bacb;
    --pw-topic-mobility: #6fc2d8;
    --pw-topic-housing: #f0a882;
    --pw-topic-science: #8fb4f0;
    --pw-topic-peace-security: #7fcbaf;

    --pw-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --pw-shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
    --pw-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.4);

    --pw-focus-color: #4fc7bb;
  }
}

/* Explicit user choice wins over the OS preference, in both directions. */
:root[data-theme="dark"] {
  --pw-primary: #4fc7bb;
  --pw-primary-hover: #6fd6cc;
  --pw-primary-active: #8ae0d8;
  --pw-primary-contrast: #04211f;
  --pw-primary-tint: #123330;

  --pw-accent: #e8a24c;
  --pw-accent-hover: #f0b570;
  --pw-accent-contrast: #2a1a02;
  --pw-accent-tint: #2a2113;

  --pw-bg: #0d1414;
  --pw-bg-subtle: #111a19;
  --pw-surface: #151f1e;
  --pw-surface-raised: #1b2726;
  --pw-surface-sunken: #0a1010;

  --pw-text: #e7edec;
  --pw-text-secondary: #a6b5b3;
  --pw-text-muted: #93a29f;

  --pw-border-strong: #687977;
  --pw-border: #2b3836;
  --pw-border-subtle: #212d2c;

  --pw-danger: #f08a8a;
  --pw-danger-tint: #331717;
  --pw-success: #7fcf9b;
  --pw-success-tint: #132618;

  --pw-status-new-fg: #c2cfcd;
  --pw-status-new-bg: #212d2c;
  --pw-status-growing-fg: #8fbef0;
  --pw-status-growing-bg: #16232f;
  --pw-status-community-fg: #8fbef0;
  --pw-status-community-bg: #16232f;
  --pw-status-review-fg: #e8b968;
  --pw-status-review-bg: #2a2113;
  --pw-status-planned-fg: #e8b968;
  --pw-status-planned-bg: #2a2113;
  --pw-status-progress-fg: #b0a4f5;
  --pw-status-progress-bg: #1f1b33;
  --pw-status-impact-fg: #7fcf9b;
  --pw-status-impact-bg: #132618;
  --pw-status-closed-fg: #a9b6b4;
  --pw-status-closed-bg: #1d2726;

  --pw-topic-environment: #6fcb8e;
  --pw-topic-health: #f08fa4;
  --pw-topic-education: #7fb6ee;
  --pw-topic-work: #e8b968;
  --pw-topic-economy: #4fc7bb;
  --pw-topic-technology-ai: #b0a4f5;
  --pw-topic-rights: #e79ac9;
  --pw-topic-government: #a8bacb;
  --pw-topic-mobility: #6fc2d8;
  --pw-topic-housing: #f0a882;
  --pw-topic-science: #8fb4f0;
  --pw-topic-peace-security: #7fcbaf;

  --pw-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --pw-shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
  --pw-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.4);

  --pw-focus-color: #4fc7bb;
}