/* PrimaryCare FAST — Design tokens
 *
 * St John Ambulance brand foundation (official palette + scale, 2024).
 * Mapped to app semantic variables for light mode, dark mode, and
 * [data-theme] overrides where the Settings screen fixes the theme.
 *
 * Whitney is listed per brand typography; bundled only if supplied by OS /
 * licence—otherwise Arial / system stacks apply.
 */

:root {
  /* ----- St John Ambulance (reference names) ----- */
  --sja-green: #009F4D;
  --sja-dark-green: #007A53;
  --sja-light-green: #BFDFD2;
  --sja-pale-green: #D1E7D2;
  --sja-yellow: #E1E000;
  --sja-pale-yellow: #FBF8C3;
  --sja-grey: #97999B;
  --sja-light-grey: #E7E7E9;
  --sja-white: #FFFFFF;
  --sja-black: #000000;

  --font-primary: 'Whitney', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: Arial, sans-serif;

  --sja-fs-xs: 0.875rem;
  --sja-fs-sm: 1rem;
  --sja-fs-md: 1.125rem;
  --sja-fs-lg: 1.5rem;
  --sja-fs-xl: 2.5rem;
  --sja-fs-xxl: 4rem;

  --sja-weight-book: 400;
  --sja-weight-medium: 500;
  --sja-weight-semibold: 600;
  --sja-weight-bold: 700;

  --sja-container-width: 1200px;
  --sja-section-spacing: 5rem;
  --sja-card-radius: 16px;
  --sja-button-radius: 8px;
  --sja-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
  --sja-transition: 0.3s ease;

  /* ----- App semantics (maps to UI) ----- */
  --color-primary: var(--sja-green);
  --color-primary-700: var(--sja-dark-green);
  /* Brand CTA: yellow/black per SJA button guidance */
  --brand-cta-bg: var(--sja-yellow);
  --brand-cta-fg: var(--sja-black);
  --brand-cta-hover: #d2d618;
  --color-on-primary: var(--sja-white);

  --color-success: #048c45;
  --color-warning: #c9a227;
  --color-danger: #c41e1e;

  --color-bg: #f4faf6;
  --color-surface: var(--sja-white);
  --color-surface-2: var(--sja-pale-green);
  --color-border: var(--sja-light-grey);

  --color-text: var(--sja-black);
  --color-text-secondary: var(--sja-grey);
  --color-text-muted: #6b6d71;

  /* Clinical bands aligned to brand neutrals where safe */
  --score-green-bg: var(--sja-light-green);
  --score-green-fg: #004d34;
  --score-amber-bg: var(--sja-pale-yellow);
  --score-amber-fg: #5c5400;
  --score-red-bg: #fcd4d4;
  --score-red-fg: #7a1212;
  /* Neutral / informational NEWS tile reads as muted brand teal */
  --score-blue-bg: #d9f0e6;
  --score-blue-fg: #065c3a;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  --radius-sm: var(--sja-button-radius);
  --radius-md: 12px;
  --radius-lg: var(--sja-card-radius);
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-card: var(--sja-shadow-soft);
  --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(0, 159, 77, 0.35);

  --font-sans: var(--font-primary);
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display: clamp(2rem, 5vw, 2.75rem);
  --fs-h1: clamp(1.625rem, 4vw, 2rem);
  --fs-h2: var(--sja-fs-lg);
  --fs-h3: clamp(1.0625rem, 2vw, 1.25rem);
  --fs-body: var(--sja-fs-sm);
  --fs-secondary: var(--sja-fs-xs);
  --fs-caption: 12px;
  --fs-timer: 40px;

  --header-h: 56px;
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --max-content: min(720px, var(--sja-container-width));

  --t-fast: 140ms;
  --t-base: var(--sja-transition);
  --t-slow: 280ms;
  --ease: ease;
}

[data-theme='dark'] {
  --color-bg: #051f14;
  --color-surface: #0d2e1f;
  --color-surface-2: #123828;
  --color-border: #1f4d35;

  --color-text: #f2fbf6;
  --color-text-secondary: #a8c4b8;
  --color-text-muted: #82a892;

  --score-green-bg: #145536;
  --score-green-fg: #cbf5dd;
  --score-amber-bg: #54460a;
  --score-amber-fg: #fff3b0;
  --score-red-bg: #5c1818;
  --score-red-fg: #ffc9c9;
  --score-blue-bg: #164832;
  --score-blue-fg: #b8eed4;

  --shadow-card: 0 4px 22px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(191, 223, 210, 0.45);

  --color-primary: #3dd086;
  --color-primary-700: #009F4D;
  --brand-cta-bg: var(--sja-yellow);
  --brand-cta-fg: var(--sja-black);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #051f14;
    --color-surface: #0d2e1f;
    --color-surface-2: #123828;
    --color-border: #1f4d35;

    --color-text: #f2fbf6;
    --color-text-secondary: #a8c4b8;
    --color-text-muted: #82a892;

    --score-green-bg: #145536;
    --score-green-fg: #cbf5dd;
    --score-amber-bg: #54460a;
    --score-amber-fg: #fff3b0;
    --score-red-bg: #5c1818;
    --score-red-fg: #ffc9c9;
    --score-blue-bg: #164832;
    --score-blue-fg: #b8eed4;

    --shadow-card: 0 4px 22px rgba(0, 0, 0, 0.45);
    --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(191, 223, 210, 0.45);

    --color-primary: #3dd086;
    --color-primary-700: #009F4D;
    --brand-cta-bg: var(--sja-yellow);
    --brand-cta-fg: var(--sja-black);
  }
}