/*
  MyNHIA design tokens - option C (Material 3 base + NHIA brand layer).
  Brand values are DERIVED from NHIA's public website and logo (captured 2026-10-29);
  NHIA publishes no formal brand guidelines, so they are not official until NHIA confirms
  (OPEN-INPUTS B-03). Sources for every brand value: design/BRAND-SOURCES.md.
  Components in app.css read only these custom properties; swap values here to rebrand.
*/

@font-face {
  font-family: "Red Hat Display";
  src: url("assets/fonts/RedHatDisplay-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-latin-var.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand reference values (see design/BRAND-SOURCES.md) */
  --brand-green-deep: #003c06;   /* logo wordmark */
  --brand-green: #1f6424;        /* logo emblem, dark green */
  --brand-green-bright: #088c18; /* logo emblem, bright green */
  --brand-green-site: #22420a;   /* website primary button */
  --brand-navy: #00224f;         /* website headings */

  /* Brand roles (light) */
  --color-primary: var(--brand-green);
  --color-on-primary: #ffffff;
  --color-primary-container: #c4efc1;
  --color-on-primary-container: var(--brand-green-deep);
  --color-secondary: #4f6350;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d2e8d0;
  --color-on-secondary-container: #0d1f10;
  --color-tertiary: #34518a;
  --color-tertiary-container: #d8e2ff;
  --color-on-tertiary-container: var(--brand-navy);

  /* Surfaces */
  --color-background: #f6faf5;
  --color-surface: #f6faf5;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f0f5ef;
  --color-surface-container: #eaefe9;
  --color-surface-container-high: #e4eae3;
  --color-surface-container-highest: #dfe4de;
  --color-on-surface: #171d18;
  --color-on-surface-variant: #404942;
  --color-outline: #707971;
  --color-outline-variant: #c0c9bf;
  --color-scrim: rgb(0 0 0 / 0.4);
  --color-inverse-surface: #2c322d;
  --color-inverse-on-surface: #edf2ec;

  /* Semantic */
  --color-success: #146c2e;
  --color-success-container: #c7f0cc;
  --color-on-success-container: #002109;
  --color-warning: #7a5900;
  --color-warning-container: #ffdf9e;
  --color-on-warning-container: #261a00;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #410002;
  --color-info: #00639b;
  --color-info-container: #cee5ff;
  --color-on-info-container: #001d33;

  /* ID card */
  --card-id-bg-start: var(--brand-green);
  --card-id-bg-end: var(--brand-green-deep);
  --card-id-text: #ffffff;
  --card-id-muted: rgb(255 255 255 / 0.74);

  /* Text over photos: same in both themes, checked against a white photo pixel */
  --photo-scrim: rgb(0 0 0 / 0.62);
  --photo-on-scrim: #ffffff;
  --photo-control: rgb(0 0 0 / 0.55);
  --photo-dot-idle: rgb(255 255 255 / 0.6);
  /* S01 full-screen photo: dark ground and a top and bottom scrim in it */
  --photo-ground: #08130a;
  --welcome-scrim: linear-gradient(to bottom, rgb(8 19 10 / 0.8) 0%, rgb(8 19 10 / 0.62) 28%, rgb(8 19 10 / 0) 42%, rgb(8 19 10 / 0) 48%, rgb(8 19 10 / 0.88) 64%, #08130a 76%);

  /* Typography */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Red Hat Display", "Open Sans", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --type-display: 700 2rem/2.5rem var(--font-display);
  --type-headline: 700 1.5rem/2rem var(--font-display);
  --type-title-l: 700 1.25rem/1.75rem var(--font-display);
  --type-title-m: 600 1rem/1.5rem var(--font-sans);
  --type-body-l: 400 1rem/1.5rem var(--font-sans);
  --type-body-m: 400 0.875rem/1.25rem var(--font-sans);
  --type-label-l: 600 0.875rem/1.25rem var(--font-sans);
  --type-label-m: 600 0.75rem/1rem var(--font-sans);

  /* Spacing (4pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shape */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Elevation */
  --elevation-1: 0 1px 2px rgb(0 0 0 / 0.12), 0 1px 3px 1px rgb(0 0 0 / 0.06);
  --elevation-2: 0 1px 2px rgb(0 0 0 / 0.14), 0 2px 6px 2px rgb(0 0 0 / 0.08);
  --elevation-3: 0 4px 8px 3px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.16);

  /* Motion */
  --motion-short: 150ms;
  --motion-medium: 250ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Sizing */
  --touch-target: 48px;
  --focus-ring: 0 0 0 3px var(--color-primary-container), 0 0 0 5px var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary: #93d991;
    --color-on-primary: #00390a;
    --color-primary-container: #0b5017;
    --color-on-primary-container: #c4efc1;
    --color-secondary: #b4ccb9;
    --color-on-secondary: #203527;
    --color-secondary-container: #364b3c;
    --color-on-secondary-container: #d0e8d5;
    --color-tertiary: #aec6ff;
    --color-tertiary-container: #17386b;
    --color-on-tertiary-container: #d8e2ff;
    --color-background: #0f1511;
    --color-surface: #0f1511;
    --color-surface-container-lowest: #0a0f0b;
    --color-surface-container-low: #171d19;
    --color-surface-container: #1b211d;
    --color-surface-container-high: #262b27;
    --color-surface-container-highest: #303632;
    --color-on-surface: #dfe4de;
    --color-on-surface-variant: #c0c9bf;
    --color-outline: #8a938a;
    --color-outline-variant: #404942;
    --color-inverse-surface: #dfe4de;
    --color-inverse-on-surface: #2c322d;
    --color-success: #8fd99a;
    --color-success-container: #005320;
    --color-on-success-container: #abf6b5;
    --color-warning: #f2c048;
    --color-warning-container: #5c4300;
    --color-on-warning-container: #ffdf9e;
    --color-error: #ffb4ab;
    --color-on-error: #690005;
    --color-error-container: #93000a;
    --color-on-error-container: #ffdad6;
    --color-info: #96ccff;
    --color-info-container: #004a75;
    --color-on-info-container: #cee5ff;
    --card-id-bg-start: #17521d;
    --card-id-bg-end: #002a04;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #93d991;
  --color-on-primary: #00390a;
  --color-primary-container: #0b5017;
  --color-on-primary-container: #c4efc1;
  --color-secondary: #b4ccb9;
  --color-on-secondary: #203527;
  --color-secondary-container: #364b3c;
  --color-on-secondary-container: #d0e8d5;
  --color-tertiary: #aec6ff;
  --color-tertiary-container: #17386b;
  --color-on-tertiary-container: #d8e2ff;
  --color-background: #0f1511;
  --color-surface: #0f1511;
  --color-surface-container-lowest: #0a0f0b;
  --color-surface-container-low: #171d19;
  --color-surface-container: #1b211d;
  --color-surface-container-high: #262b27;
  --color-surface-container-highest: #303632;
  --color-on-surface: #dfe4de;
  --color-on-surface-variant: #c0c9bf;
  --color-outline: #8a938a;
  --color-outline-variant: #404942;
  --color-inverse-surface: #dfe4de;
  --color-inverse-on-surface: #2c322d;
  --color-success: #8fd99a;
  --color-success-container: #005320;
  --color-on-success-container: #abf6b5;
  --color-warning: #f2c048;
  --color-warning-container: #5c4300;
  --color-on-warning-container: #ffdf9e;
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --color-info: #96ccff;
  --color-info-container: #004a75;
  --color-on-info-container: #cee5ff;
  --card-id-bg-start: #17521d;
  --card-id-bg-end: #002a04;
}