:root {
  color-scheme: light;

  /* ============================================
     M3 Color Roles (brand-adapted, light theme)
     Seed: #4FAE6B (brand green)
     ============================================ */

  /* Accent: Primary (brand green) */
  --md-sys-color-primary: #2E7D4A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E7F4EA;
  --md-sys-color-on-primary-container: #0A2E16;

  /* Accent: Secondary (brand blue) */
  --md-sys-color-secondary: #234BA6;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #EAF0FB;
  --md-sys-color-on-secondary-container: #0B1A3A;

  /* Accent: Tertiary (warm accent) */
  --md-sys-color-tertiary: #8B5E3C;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #F5E0D0;
  --md-sys-color-on-tertiary-container: #3A1E08;

  /* Error */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* Surface */
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-on-surface-variant: #49454F;

  /* Surface Containers (M3 hierarchy) */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;

  /* Surface Dim/Bright */
  --md-sys-color-surface-dim: #DED8E1;
  --md-sys-color-surface-bright: #FEF7FF;

  /* Outline */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;

  /* Inverse */
  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;
  --md-sys-color-inverse-primary: #A8DDB5;

  /* Fixed colors (for consistent accent on any surface) */
  --md-sys-color-primary-fixed: #E7F4EA;
  --md-sys-color-primary-fixed-dim: #A8DDB5;
  --md-sys-color-on-primary-fixed: #0A2E16;
  --md-sys-color-on-primary-fixed-variant: #2E7D4A;

  /* ============================================
     Legacy aliases (backward compat)
     ============================================ */
  --bg-main: var(--md-sys-color-surface);
  --bg-soft: var(--md-sys-color-surface-container-low);
  --bg-card: var(--md-sys-color-surface-container);
  --bg-dark: #07173A;

  --text-main: var(--md-sys-color-on-surface);
  --text-soft: var(--md-sys-color-on-surface-variant);
  --text-muted: var(--md-sys-color-outline);
  --text-inverse: var(--md-sys-color-inverse-on-surface);

  --brand-green: var(--md-sys-color-primary);
  --brand-green-soft: var(--md-sys-color-primary-container);
  --brand-green-mid: var(--md-sys-color-primary-fixed-dim);
  --brand-blue: var(--md-sys-color-secondary);
  --brand-blue-soft: var(--md-sys-color-secondary-container);

  --warning-bg: #F7F2E7;
  --warning-border: #E8D5A3;
  --danger-bg: var(--md-sys-color-error-container);
  --danger-border: #F0BBBD;
  --success-bg: var(--md-sys-color-primary-container);
  --success-border: var(--md-sys-color-primary-fixed-dim);

  --line-soft: var(--md-sys-color-outline-variant);
  --line-mid: var(--md-sys-color-outline);

  /* ============================================
     M3 Shape (Expressive)
     ============================================ */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* Component shape mapping */
  --radius-pill: var(--md-sys-shape-corner-full);
  --radius-card: var(--md-sys-shape-corner-extra-large);
  --radius-hero: 36px;
  --radius-input: var(--md-sys-shape-corner-extra-small);
  --radius-btn: 12px;
  --radius-chip: var(--md-sys-shape-corner-small);
  --radius-dialog: var(--md-sys-shape-corner-extra-large);
  --radius-dropdown: var(--md-sys-shape-corner-medium);

  /* ============================================
     M3 Elevation & Shadows
     ============================================ */
  /* Level 0: flat */
  --md-sys-elevation-level0: none;
  /* Level 1: cards, chips */
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  /* Level 2: dropdowns, menus */
  --md-sys-elevation-level2: 0 2px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  /* Level 3: dialogs, bottom sheets */
  --md-sys-elevation-level3: 0 4px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  /* Level 4: FAB, modal overlays */
  --md-sys-elevation-level4: 0 6px 12px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.04);
  /* Level 5: top-level overlays */
  --md-sys-elevation-level5: 0 8px 16px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);

  --shadow-card: var(--md-sys-elevation-level1);
  --shadow-elevated: var(--md-sys-elevation-level3);
  --shadow-dropdown: var(--md-sys-elevation-level2);
  --shadow-modal: var(--md-sys-elevation-level4);

  /* ============================================
     M3 Motion
     ============================================ */
  /* Standard easing curves */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-linear: cubic-bezier(0.3, 0, 0, 1);

  /* Duration */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;

  /* Legacy aliases */
  --transition-fast: var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  --transition-base: var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  --transition-slow: var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate);

  /* ============================================
     M3 Typography Scale
     ============================================ */
  --font-main: 'Inter', 'Roboto', system-ui, sans-serif;
  --font-heading: 'Golos Text', 'Inter', system-ui, sans-serif;
  --font-icons: 'Material Symbols Outlined';

  /* Display — fluid (mobile → desktop) */
  --md-sys-typescale-display-large-size: clamp(36px, 5vw + 16px, 57px);
  --md-sys-typescale-display-large-line-height: 1.12;
  --md-sys-typescale-display-large-weight: 700;
  --md-sys-typescale-display-large-tracking: -0.5px;

  --md-sys-typescale-display-medium-size: clamp(32px, 4vw + 14px, 45px);
  --md-sys-typescale-display-medium-line-height: 1.15;
  --md-sys-typescale-display-medium-weight: 700;

  --md-sys-typescale-display-small-size: clamp(28px, 3vw + 12px, 36px);
  --md-sys-typescale-display-small-line-height: 1.2;
  --md-sys-typescale-display-small-weight: 700;

  /* Headline — fluid */
  --md-sys-typescale-headline-large-size: clamp(24px, 2.4vw + 10px, 32px);
  --md-sys-typescale-headline-large-line-height: 1.25;
  --md-sys-typescale-headline-large-weight: 600;

  --md-sys-typescale-headline-medium-size: clamp(22px, 1.6vw + 10px, 28px);
  --md-sys-typescale-headline-medium-line-height: 1.28;
  --md-sys-typescale-headline-medium-weight: 600;

  --md-sys-typescale-headline-small-size: clamp(20px, 1vw + 12px, 24px);
  --md-sys-typescale-headline-small-line-height: 1.33;
  --md-sys-typescale-headline-small-weight: 600;

  /* Title */
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: 400;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-tracking: 0.1px;

  /* Body */
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: 400;

  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight: 400;

  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight: 400;

  /* Label */
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;

  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: 0.5px;

  /* Legacy typography aliases */
  --text-xs: var(--md-sys-typescale-body-small-size);
  --text-sm: var(--md-sys-typescale-body-medium-size);
  --text-base: var(--md-sys-typescale-body-large-size);
  --text-md: var(--md-sys-typescale-title-medium-size);
  --text-lg: var(--md-sys-typescale-title-large-size);
  --text-xl: var(--md-sys-typescale-headline-small-size);
  --text-2xl: var(--md-sys-typescale-headline-medium-size);
  --text-3xl: var(--md-sys-typescale-headline-large-size);
  --text-4xl: var(--md-sys-typescale-display-small-size);
  --text-5xl: var(--md-sys-typescale-display-medium-size);

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ============================================
     Spacing (M3 baseline grid)
     ============================================ */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ============================================
     Z-index
     ============================================ */
  --z-nav-bottom: 100;
  --z-header: 90;
  --z-dropdown: 80;
  --z-modal: 200;

  /* ============================================
     Sizes
     ============================================ */
  --bottom-nav-height: 80px;
  --header-height: 64px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* ============================================
     M3 State Layer Opacities
     ============================================ */
  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-focus-state-layer-opacity: 0.12;
  --md-sys-state-pressed-state-layer-opacity: 0.12;
  --md-sys-state-dragged-state-layer-opacity: 0.16;
}

/* ============================================
   Dark Theme (M3 tonal mapping)
   System preference OR forced via data-theme
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Primary */
    --md-sys-color-primary: #A8DDB5;
    --md-sys-color-on-primary: #0A2E16;
    --md-sys-color-primary-container: #1A5C32;
    --md-sys-color-on-primary-container: #C8EACD;

    /* Secondary */
    --md-sys-color-secondary: #A8C7FA;
    --md-sys-color-on-secondary: #0B1A3A;
    --md-sys-color-secondary-container: #1A3578;
    --md-sys-color-on-secondary-container: #D0E2FF;

    /* Tertiary */
    --md-sys-color-tertiary: #F0C5A6;
    --md-sys-color-on-tertiary: #3A1E08;
    --md-sys-color-tertiary-container: #5C3A22;
    --md-sys-color-on-tertiary-container: #F5E0D0;

    /* Error */
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;

    /* Surface */
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #E6E0E9;
    --md-sys-color-on-surface-variant: #CAC4D0;

    /* Surface Containers (dark) */
    --md-sys-color-surface-container-lowest: #0F0D13;
    --md-sys-color-surface-container-low: #1D1B20;
    --md-sys-color-surface-container: #211F26;
    --md-sys-color-surface-container-high: #2B2930;
    --md-sys-color-surface-container-highest: #36343B;

    /* Surface Dim/Bright */
    --md-sys-color-surface-dim: #141218;
    --md-sys-color-surface-bright: #3B383E;

    /* Outline */
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;

    /* Inverse */
    --md-sys-color-inverse-surface: #E6E0E9;
    --md-sys-color-inverse-on-surface: #322F35;
    --md-sys-color-inverse-primary: #2E7D4A;

    /* Fixed */
    --md-sys-color-primary-fixed: #C8EACD;
    --md-sys-color-primary-fixed-dim: #A8DDB5;
    --md-sys-color-on-primary-fixed: #0A2E16;
    --md-sys-color-on-primary-fixed-variant: #2E7D4A;
  }
}

/* Forced dark theme via toggle */
:root[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary: #A8DDB5;
  --md-sys-color-on-primary: #0A2E16;
  --md-sys-color-primary-container: #1A5C32;
  --md-sys-color-on-primary-container: #C8EACD;

  --md-sys-color-secondary: #A8C7FA;
  --md-sys-color-on-secondary: #0B1A3A;
  --md-sys-color-secondary-container: #1A3578;
  --md-sys-color-on-secondary-container: #D0E2FF;

  --md-sys-color-tertiary: #F0C5A6;
  --md-sys-color-on-tertiary: #3A1E08;
  --md-sys-color-tertiary-container: #5C3A22;
  --md-sys-color-on-tertiary-container: #F5E0D0;

  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;

  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-on-surface-variant: #CAC4D0;

  --md-sys-color-surface-container-lowest: #0F0D13;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;

  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3B383E;

  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;

  --md-sys-color-inverse-surface: #E6E0E9;
  --md-sys-color-inverse-on-surface: #322F35;
  --md-sys-color-inverse-primary: #2E7D4A;

  --md-sys-color-primary-fixed: #C8EACD;
  --md-sys-color-primary-fixed-dim: #A8DDB5;
  --md-sys-color-on-primary-fixed: #0A2E16;
  --md-sys-color-on-primary-fixed-variant: #2E7D4A;
}

/* Desktop overrides */
@media (min-width: 1024px) {
  :root {
    --bottom-nav-height: 0px;
  }
}