/* ==========================================================================
   CareEco Design Tokens — Material Design 3 roles, mapped onto the shared
   brand palette (brand-tokens.css). Load brand-tokens.css before this file.
   Primary = Brand Blue #196EE6, Secondary = Brand Navy #1A154C.
   No hues outside this palette except standard success/warning/error/info
   semantic states.
   ========================================================================== */

:root {
  /* ---- Primary (Indigo) ---- */
  --md-sys-color-primary: var(--brand-primary-600);
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: var(--brand-primary-100);
  --md-sys-color-on-primary-container: var(--brand-primary-800);
  --md-sys-color-primary-dark: var(--brand-primary-800);
  --md-sys-color-on-primary-dark: #FFFFFF;

  /* ---- Secondary (Brand Navy) ---- */
  --md-sys-color-secondary: var(--brand-secondary-600);
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: var(--brand-secondary-100);
  --md-sys-color-on-secondary-container: var(--brand-secondary-800);

  /* ---- Semantic states (the one allowed exception) ---- */
  --md-sys-color-error: var(--brand-error-fg);
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: var(--brand-error-bg);
  --md-sys-color-on-error-container: var(--brand-error-fg);

  --md-sys-color-success: var(--brand-success-fg);
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: var(--brand-success-bg);
  --md-sys-color-on-success-container: var(--brand-success-fg);

  --md-sys-color-warning: var(--brand-warning-fg);
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-warning-container: var(--brand-warning-bg);
  --md-sys-color-on-warning-container: var(--brand-warning-fg);

  --md-sys-color-info: var(--brand-info-fg);
  --md-sys-color-on-info: #FFFFFF;
  --md-sys-color-info-container: var(--brand-info-bg);
  --md-sys-color-on-info-container: var(--brand-info-fg);

  /* ---- Surfaces & background (very light primary tints, not plain white) ---- */
  --md-sys-color-background: var(--brand-primary-50);
  --md-sys-color-on-background: var(--brand-neutral-900);

  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: var(--brand-neutral-900);
  --md-sys-color-on-surface-variant: var(--brand-neutral-600);

  --md-sys-color-surface-dim: var(--brand-primary-200);
  --md-sys-color-surface-bright: #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F8F8FB;
  --md-sys-color-surface-container: var(--brand-primary-100);
  --md-sys-color-surface-container-high: #DEE0EC;
  --md-sys-color-surface-container-highest: var(--brand-primary-200);

  --md-sys-color-outline: var(--brand-neutral-400);
  --md-sys-color-outline-variant: var(--brand-neutral-200);

  --md-sys-color-inverse-surface: var(--brand-secondary-900);
  --md-sys-color-inverse-on-surface: #F4F4F8;
  --md-sys-color-inverse-primary: var(--brand-primary-300);

  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* ---- Typography — Fraunces for display/headings & numbers, Inter for UI/body ---- */
  --md-sys-font-brand: 'Fraunces', Georgia, serif;
  --md-sys-font-body: 'Inter', system-ui, sans-serif;
  --md-sys-font-mono: 'Fraunces', Georgia, serif;

  --md-sys-type-display-large: 800 clamp(2.5rem, 4vw + 1rem, 3.75rem)/1.1 var(--md-sys-font-brand);
  --md-sys-type-display-medium: 800 clamp(2rem, 3vw + 1rem, 2.75rem)/1.15 var(--md-sys-font-brand);
  --md-sys-type-display-small: 700 clamp(1.75rem, 2vw + 1rem, 2.25rem)/1.2 var(--md-sys-font-brand);
  --md-sys-type-headline-large: 700 2rem/1.25 var(--md-sys-font-brand);
  --md-sys-type-headline-medium: 700 1.5rem/1.3 var(--md-sys-font-brand);
  --md-sys-type-headline-small: 600 1.25rem/1.35 var(--md-sys-font-body);
  --md-sys-type-title-large: 600 1.375rem/1.3 var(--md-sys-font-body);
  --md-sys-type-title-medium: 600 1.125rem/1.4 var(--md-sys-font-body);
  --md-sys-type-title-small: 600 1rem/1.4 var(--md-sys-font-body);
  --md-sys-type-body-large: 400 1.0625rem/1.6 var(--md-sys-font-body);
  --md-sys-type-body-medium: 400 0.9375rem/1.55 var(--md-sys-font-body);
  --md-sys-type-body-small: 400 0.8125rem/1.5 var(--md-sys-font-body);
  --md-sys-type-label-large: 600 0.9375rem/1.4 var(--md-sys-font-body);
  --md-sys-type-label-medium: 600 0.8125rem/1.4 var(--md-sys-font-body);
  --md-sys-type-label-small: 600 0.75rem/1.4 var(--md-sys-font-body);

  /* ---- Shape scale ---- */
  --md-sys-shape-none: 0;
  --md-sys-shape-xs: 8px;
  --md-sys-shape-sm: 12px;
  --md-sys-shape-md: 18px;
  --md-sys-shape-lg: 28px;
  --md-sys-shape-xl: 36px;
  --md-sys-shape-full: 999px;

  /* ---- Elevation ---- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px 1px rgba(15,23,42,0.08);
  --md-sys-elevation-2: 0 1px 2px rgba(15,23,42,0.08), 0 2px 6px 2px rgba(15,23,42,0.08);
  --md-sys-elevation-3: 0 1px 3px rgba(15,23,42,0.1), 0 4px 8px 3px rgba(15,23,42,0.1);
  --md-sys-elevation-4: 0 2px 3px rgba(15,23,42,0.1), 0 6px 10px 4px rgba(15,23,42,0.1);
  --md-sys-elevation-5: 0 4px 4px rgba(15,23,42,0.12), 0 8px 12px 6px rgba(15,23,42,0.12);

  /* ---- Motion ---- */
  --md-sys-motion-fast: 120ms;
  --md-sys-motion-standard: 200ms;
  --md-sys-motion-slow: 400ms;
  --md-sys-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decel: cubic-bezier(0, 0, 0, 1);

  /* ---- Layout (8px grid) ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --content-max: 1280px;
  --content-max-wide: 1360px;
  --nav-height: 72px;
}

/* ---- Dark scheme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: var(--brand-primary-300);
    --md-sys-color-on-primary: var(--brand-primary-900);
    --md-sys-color-primary-container: var(--brand-primary-700);
    --md-sys-color-on-primary-container: var(--brand-primary-100);
    --md-sys-color-primary-dark: var(--brand-primary-900);
    --md-sys-color-on-primary-dark: #FFFFFF;

    --md-sys-color-secondary: var(--brand-secondary-300);
    --md-sys-color-on-secondary: var(--brand-secondary-900);
    --md-sys-color-secondary-container: var(--brand-secondary-800);
    --md-sys-color-on-secondary-container: var(--brand-secondary-100);

    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;

    --md-sys-color-success: #8CD9A3;
    --md-sys-color-success-container: #0F4020;
    --md-sys-color-on-success-container: #E1F5E8;

    --md-sys-color-warning: #FCD34D;
    --md-sys-color-warning-container: #78350F;
    --md-sys-color-on-warning-container: #FEF3C7;

    --md-sys-color-info: #93C5FD;
    --md-sys-color-info-container: #1E3A8A;
    --md-sys-color-on-info-container: #DBEAFE;

    --md-sys-color-background: var(--brand-primary-900);
    --md-sys-color-on-background: #E5E6EF;

    --md-sys-color-surface: var(--brand-primary-900);
    --md-sys-color-on-surface: #E5E6EF;
    --md-sys-color-on-surface-variant: var(--brand-primary-300);

    --md-sys-color-surface-dim: var(--brand-primary-900);
    --md-sys-color-surface-bright: var(--brand-primary-500);
    --md-sys-color-surface-container-lowest: #0C0F2E;
    --md-sys-color-surface-container-low: var(--brand-primary-800);
    --md-sys-color-surface-container: #1B2560;
    --md-sys-color-surface-container-high: #232D6B;
    --md-sys-color-surface-container-highest: #2B3676;

    --md-sys-color-outline: var(--brand-primary-400);
    --md-sys-color-outline-variant: var(--brand-primary-700);

    --md-sys-color-inverse-surface: #E5E6EF;
    --md-sys-color-inverse-on-surface: var(--brand-primary-800);
    --md-sys-color-inverse-primary: var(--brand-primary-600);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --md-sys-color-primary: var(--brand-primary-300);
  --md-sys-color-on-primary: var(--brand-primary-900);
  --md-sys-color-primary-container: var(--brand-primary-700);
  --md-sys-color-on-primary-container: var(--brand-primary-100);
  --md-sys-color-primary-dark: var(--brand-primary-900);
  --md-sys-color-on-primary-dark: #FFFFFF;

  --md-sys-color-secondary: var(--brand-secondary-300);
  --md-sys-color-on-secondary: var(--brand-secondary-900);
  --md-sys-color-secondary-container: var(--brand-secondary-800);
  --md-sys-color-on-secondary-container: var(--brand-secondary-100);

  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;

  --md-sys-color-success: #8CD9A3;
  --md-sys-color-success-container: #0F4020;
  --md-sys-color-on-success-container: #E1F5E8;

  --md-sys-color-warning: #FCD34D;
  --md-sys-color-warning-container: #78350F;
  --md-sys-color-on-warning-container: #FEF3C7;

  --md-sys-color-info: #93C5FD;
  --md-sys-color-info-container: #1E3A8A;
  --md-sys-color-on-info-container: #DBEAFE;

  --md-sys-color-background: var(--brand-primary-900);
  --md-sys-color-on-background: #E5E6EF;

  --md-sys-color-surface: var(--brand-primary-900);
  --md-sys-color-on-surface: #E5E6EF;
  --md-sys-color-on-surface-variant: var(--brand-primary-300);

  --md-sys-color-surface-dim: var(--brand-primary-900);
  --md-sys-color-surface-bright: var(--brand-primary-500);
  --md-sys-color-surface-container-lowest: #0C0F2E;
  --md-sys-color-surface-container-low: var(--brand-primary-800);
  --md-sys-color-surface-container: #1B2560;
  --md-sys-color-surface-container-high: #232D6B;
  --md-sys-color-surface-container-highest: #2B3676;

  --md-sys-color-outline: var(--brand-primary-400);
  --md-sys-color-outline-variant: var(--brand-primary-700);

  --md-sys-color-inverse-surface: #E5E6EF;
  --md-sys-color-inverse-on-surface: var(--brand-primary-800);
  --md-sys-color-inverse-primary: var(--brand-primary-600);

  color-scheme: dark;
}