/* =========================================================================
   DESIGN TOKENS — the drop-in file
   =========================================================================

   This is the ONLY file that defines colour, type, spacing, radius or shadow.
   base.css and components.css consume these variables and hard-code nothing,
   so a whole reskin is this one file replaced.

   For a design handoff: give the designer this file and docs/DESIGN.md. They
   change values here; they do not need to touch markup, and the component
   class names are a stable contract (see docs/DESIGN.md).

   Current identity: myelection.app — deep navy and trust teal on a soft
   near-white. Values come from the brand pack (myelection-app-brand-pack-v1);
   the five brand hexes are marked "brand" below and must not drift.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-variable-latin.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  /* ---- brand palette -----------------------------------------------------
     Raw brand colours from the pack, plus the ramps derived from them.
     Everything below is expressed in terms of these, so changing the two
     brand hues re-tints the whole application coherently. */
  --brand-navy: #16324f; /* brand: ink navy — trust and structure */
  --brand-teal: #1faf9a; /* brand: trust teal — accent only */
  --brand-ink: #101828; /* brand: text ink */
  --brand-slate: #667085; /* brand: muted slate */
  --brand-mist: #f7fafc; /* brand: soft background */

  /* Navy ramp. --navy-700 is the brand hex. */
  --navy-50: #eef3f8;
  --navy-100: #dce6ef;
  --navy-200: #b9cbdc;
  --navy-500: #2c5a87;
  --navy-700: var(--brand-navy);
  --navy-800: #102640;
  --navy-900: #0b1b2e;

  /* Teal ramp. --teal-500 is the brand hex; --teal-700 is the readable teal
     for text and icons. Teal is never the body-text colour. */
  --teal-50: #ebf9f6;
  --teal-100: #d3f1ec;
  --teal-200: #a9e3da;
  --teal-400: #4fc4b3;
  --teal-500: var(--brand-teal);
  --teal-600: #189383;
  --teal-700: #0f7768;

  /* Ink and mist ramps. */
  --ink-900: var(--brand-ink);
  --ink-700: #344054;
  --ink-500: var(--brand-slate);
  --ink-300: #c0c7d2;
  --ink-200: #dde2e9;
  --ink-100: #edf0f4;
  --mist-100: var(--brand-mist);
  --mist-200: #f2f6fa; /* lightened from #EDF2F7: see the contrast note below */

  /* ---- semantic surfaces -------------------------------------------------
     Components reference these, never the raw palette above.
     Two backgrounds per screen: mist page, white content. At most one navy
     panel for emphasis. */
  --surface-page: var(--mist-100);
  --surface-raised: #ffffff;
  --surface-sunken: var(--mist-200);
  --surface-inverse: var(--navy-700);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  /* Navy carries action: primary buttons, links, active nav, dark panels. */
  --accent: var(--navy-700);
  --accent-hover: var(--navy-800);
  --accent-quiet: var(--navy-50);

  /* Teal carries selection and progress, and nothing else. It is a separate
     role from --accent on purpose: a chosen candidate must not look like a
     button, and the brand pack reserves teal as an accent. */
  --select: var(--teal-600);
  --select-hover: var(--teal-700);
  --select-ground: var(--teal-50);
  --select-ink: var(--teal-700);

  --border: var(--ink-200);
  --border-strong: var(--ink-300);

  /* ---- status ------------------------------------------------------------
     Each pairs a text colour with a tinted ground, so status is never carried
     by hue alone -- there is always a border and a label too. The brand pack's
     semantic hues are deliberately desaturated. */
  --ok: var(--teal-700);
  --ok-ground: var(--teal-100);
  --ok-line: var(--teal-200);
  --warn: #8a590b;
  --warn-ground: #faecd2;
  --warn-line: #f0ddb6;
  --danger: #b42318;
  --danger-ground: #fbe3e1;
  --danger-line: #f4c9c5;
  --info: var(--navy-700);
  --info-ground: var(--navy-50);
  --info-line: var(--navy-100);

  /* Focus ring: deliberately not the brand colour, so it stays visible
     against brand-coloured components. Navy and teal are both spoken for,
     so the ring stays the warm amber it has always been. */
  --focus-ring: #c2521a;

  /* ---- type --------------------------------------------------------------
     Inter for everything, per the brand pack, self-hosted from /static/fonts
     because the CSP forbids any third-party request. The fallback stack is
     the pack's own. */
  --font-sans: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs: 0.78125rem; /* 12.5px — captions, pills, table heads */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.1875rem; /* 19px — lead */
  --text-xl: 1.375rem; /* 22px */
  --text-2xl: 1.875rem; /* 30px */
  --text-3xl: 2.5rem; /* 40px */

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600; /* buttons and labels, per brand-tokens.json */
  --weight-heading: 650; /* headings, per brand-tokens.json */
  --weight-bold: 700; /* wordmark weight; also the heaviest UI weight */

  /* Optical tracking: negative on headings, positive on micro-labels,
     never on body. */
  --tracking-heading: -0.024em;
  --tracking-heading-tight: -0.03em;
  --tracking-label: 0.06em;

  /* ---- space -------------------------------------------------------------
     A 4px scale. Layout uses these names, never bare pixel values. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ---- shape --------------------------------------------------------------
     Brand pack radii: 8px on controls and small chrome, 14px on cards and
     dialogs, 22px on feature panels. 4px is the micro radius. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Cool, low shadows over the mist page — calm, never floating glass.
     No coloured glows, no inner shadows. */
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.07), 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-md: 0 4px 10px rgb(16 24 40 / 0.08), 0 1px 3px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 12px 32px rgb(11 27 46 / 0.14), 0 3px 8px rgb(11 27 46 / 0.07);

  /* ---- motion -------------------------------------------------------------
     Restrained and functional: colour changes are quick, panels are slower,
     and a bar filling is the one animation that carries meaning. No bounce,
     no spring, no scale. */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 90ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --motion-hover: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);

  /* ---- layout -------------------------------------------------------------- */
  --measure-narrow: 36rem; /* voter pages: one column, easy to read on a phone */
  --measure-wide: 68rem; /* administration: tables and dashboards */

  /* Minimum interactive target. The brief asks for large tap targets; 44px is
     the usual floor for a thumb. The brand pack asks for 64px on a ballot
     option, which .option applies on top of this. Do not lower either. */
  --target-min: 44px;
  --target-option: 64px;
}

/* -------------------------------------------------------------------------
   Dark mode.
   The brand pack defines no dark palette, so this is derived from it: the
   navy ramp becomes the ground, and the action colour lifts to a light navy
   so that navy-for-action / teal-for-selection survives the inversion.
   Only the semantic layer is redefined.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: var(--navy-900);
    --surface-raised: #12283f;
    --surface-sunken: #081524;
    --surface-inverse: var(--navy-50);

    --text-primary: #f1f5f9;
    --text-secondary: #a7b8cb;
    --text-inverse: var(--navy-900);
    --text-on-accent: var(--navy-900);

    --accent: #93b8dd;
    --accent-hover: #b6d0e9;
    --accent-quiet: #1a3a5a;

    --select: var(--teal-400);
    --select-hover: #79d5c7;
    --select-ground: #0e3230;
    --select-ink: var(--teal-400);

    --border: #2f4a63;
    --border-strong: #6b8199;

    --ok: var(--teal-400);
    --ok-ground: #0e3230;
    --ok-line: #1c5b54;
    --warn: #e8bd79;
    --warn-ground: #35280f;
    --warn-line: #5c4720;
    --danger: #ff9d95;
    --danger-ground: #3a1a19;
    --danger-line: #6b2f2c;
    --info: #93b8dd;
    --info-ground: #1a3a5a;
    --info-line: #2d5c85;

    --focus-ring: #ffab6b;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 10px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}

/* Respect a reduced-motion preference: the transitions in components.css are
   decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}