/* Verilo design tokens. Canonical values: docs/foundation/04_UI_SPEC.md, Design tokens (D-078, superseding D-044's
   values). This file is the one copy: the prototype links it, the Merchant Dashboard serves it, and the Verified
   Capture Client bundles it (client/src/ui/styles.css imports it). Pages and components use these custom properties
   only, never raw values. Built from the Verilo brand pack in brand/ (brand/05-colour/palette.txt), the source of truth for brand assets. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2-variations"), url("fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root, [data-theme="light"] {
  /* ---------- Type ---------- Plus Jakarta Sans, self-hosted latin subset (27 KB), system fallback (OQ-63). */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --type-display: 700 2rem/2.5rem var(--font-sans);        /* 32/40  page titles, Claimant headlines */
  --type-title: 700 1.5rem/2rem var(--font-sans);          /* 24/32  card heroes, Result State on M4 */
  --type-heading: 650 1.125rem/1.625rem var(--font-sans);  /* 18/26  section and card headings */
  --type-body: 400 1rem/1.5rem var(--font-sans);           /* 16/24 */
  --type-label: 600 0.875rem/1.25rem var(--font-sans);     /* 14/20  buttons, labels, table text */
  --type-caption: 500 0.75rem/1rem var(--font-sans);       /* 12/16 */
  --type-overline: 700 0.6875rem/1rem var(--font-sans);    /* 11/16  uppercase section labels, with --tracking-wide */
  --type-metric: 700 2.5rem/1 var(--font-sans);            /* 40     scores and counts, tabular figures */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ---------- Spacing ---------- 4px base, nine steps. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;          /* chips, small marks */
  --radius-input: 10px;      /* inputs, buttons, plates */
  --radius-card: 16px;       /* cards, viewfinder */
  --radius-lg: 24px;         /* hero surfaces, sheets */
  --radius-pill: 999px;

  /* ---------- Motion ---------- Calm and short; prefers-reduced-motion removes movement, keeps fades. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---------- Brand ---------- Fixed brand colours; decoration only, never text on their own. */
  --brand-verify-blue: #2563FF;
  --brand-pulse-lavender: #A78BFA;
  --brand-capture-sky: #7DD3FC;
  --brand-fair-mint: #34D399;
  --brand-cloud: #F1F5FF;
  --brand-midnight: #0F172A;
  --brand-gradient: linear-gradient(90deg, #2563FF 0%, #A78BFA 45%, #7DD3FC 75%, #34D399 100%);

  /* ---------- Colour roles, light ---------- Every text pair passes WCAG 2.1 AA (OQ-4); checked in 04. */
  --color-ground: #F5F7FD;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #EEF2FB;
  --color-text: #0F172A;
  --color-text-muted: #475069;
  --color-text-subtle: #5F6A86;
  --color-border: #E1E6F2;
  --color-border-strong: #7F8AA6;
  --color-primary: #2563FF;
  --color-primary-hover: #1C50E6;
  --color-primary-soft: #EDF2FF;
  --color-on-primary: #FFFFFF;
  --color-link: #1D4ED8;
  --color-focus: #2563FF;
  --color-critical: #B42318;          /* System and validation errors on G and M only. Never a Result State, never on Surface C. */
  --color-verified: #047857;
  --color-verified-bg: #E6F7EF;
  --color-verified-solid: #10B981;
  --color-needs-review: #8A5300;
  --color-needs-review-bg: #FFF3D6;
  --color-needs-review-solid: #F2A922;
  --color-unable-to-verify: #454A8C;
  --color-unable-to-verify-bg: #EEEFFB;
  --color-unable-to-verify-solid: #7C82D6;
  --color-scrim: rgba(15, 23, 42, 0.58);  /* Text plates over the camera viewfinder, with backdrop blur. */
  --color-logo-plate: transparent;        /* Behind the Merchant logo; white on dark so dark-ink logos stay visible. */
  --color-inverse: #0F172A;               /* Neutral primary on Surface C when the Merchant colour fails contrast (D-046). */
  --color-on-inverse: #FFFFFF;
  --color-accent: #2563FF;                /* Decorative brand marks on Surface C; set to the Merchant colour, never shifted. */

  /* ---------- Elevation ---------- Soft, blue-tinted. */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(37, 56, 120, 0.08);
  --elevation-2: 0 4px 12px rgba(37, 56, 120, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  --elevation-3: 0 18px 40px rgba(37, 56, 120, 0.16), 0 4px 10px rgba(15, 23, 42, 0.06);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-ground: #0A0F1E;
  --color-surface: #111A2E;
  --color-surface-sunken: #0C1426;
  --color-text: #EEF2FF;
  --color-text-muted: #AAB4CE;
  --color-text-subtle: #8C97B4;
  --color-border: #253150;
  --color-border-strong: #64708F;
  --color-primary: #6E97FF;
  --color-primary-hover: #8AACFF;
  --color-primary-soft: #1A2747;
  --color-on-primary: #0A0F1E;
  --color-link: #8FB0FF;
  --color-focus: #8FB0FF;
  --color-critical: #FF8F7F;
  --color-verified: #4ADE9F;
  --color-verified-bg: #0D2E25;
  --color-verified-solid: #34D399;
  --color-needs-review: #F6C15A;
  --color-needs-review-bg: #33270F;
  --color-needs-review-solid: #F2A922;
  --color-unable-to-verify: #B8BCF6;
  --color-unable-to-verify-bg: #22264A;
  --color-unable-to-verify-solid: #8D93E6;
  --color-scrim: rgba(5, 8, 18, 0.62);
  --color-logo-plate: #FFFFFF;
  --color-inverse: #FFFFFF;
  --color-on-inverse: #0F172A;
  --color-accent: #6E97FF;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --elevation-2: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --elevation-3: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

/* Every surface follows the device colour setting (D-078, superseding D-044's "G and M are light"): the prototype
   (proto.js), the dashboard (an inline script in its page head) and the client (dom.ts applyTheme) set data-theme
   from prefers-color-scheme, so the dark values above are the only copy. */