@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* --- COLOR SYSTEM: Visual Identity v1.0 (Refined) --- */

  /* Primary: Hunter Green (Refined) */
  --md-sys-color-primary: #2C4C3B;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E8F5E9;
  /* Pale wash */
  --md-sys-color-on-primary-container: #002114;

  /* Secondary / Surface Tones */
  --md-sys-color-secondary: #8C7E70;
  /* Muted Gold/Bronze kept as accent */
  --md-sys-color-on-secondary: #FFFFFF;

  /* Backgrounds & Surfaces (Light) */
  --md-sys-color-background: #FDFBF7;
  /* Alabaster */
  --md-sys-color-on-background: #121714;
  /* Deep Green-Black */

  /* Surfaces & Containers */
  --md-sys-color-surface: #F5F2EA;
  /* Warm Clay */
  --md-sys-color-on-surface: #121714;
  --md-sys-color-surface-variant: #EBE5DE;
  --md-sys-color-on-surface-variant: #49454E;

  /* Missing M3 Containers (Derived from Palette) */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FDFBF7;
  /* Alabaster */
  --md-sys-color-surface-container: #F5F2EA;
  /* Warm Clay */
  --md-sys-color-surface-container-high: #EBE5DE;
  --md-sys-color-surface-container-highest: #D7D3C8;

  --md-sys-color-secondary-container: #EBE5DE;
  /* Matching Surface Variant */
  --md-sys-color-on-secondary-container: #2d312f;
  /* Darker text */

  /* Inverse Tokens (for Toasts/Snackbars) */
  --md-sys-color-inverse-surface: #121714;
  /* Dark for light mode */
  --md-sys-color-inverse-on-surface: #F5F2EA;
  /* Light text on inverse */

  /* Outlines & Borders */
  --md-sys-color-outline: #2d4e3c;
  --md-sys-color-outline-variant: #D7D3C8;
  --md-sys-color-border-variant: #EBE5DA;

  /* Semantic Text */
  --md-sys-color-text-main: #121714;
  --md-sys-color-text-muted: #667f71;

  /* --- TYPOGRAPHY FAMILIES --- */
  --font-display: 'Playfair Display', serif;
  /* Display Serif */
  --font-serif: 'Playfair Display', serif;
  /* Editorial Headings (Serif) */
  --font-sans: 'DM Sans', sans-serif;
  /* Sans UI/Body */
  --font-body: var(--font-sans);
  /* Standardizing Body to Sans */

  /* M3 Typography Token Overrides */
  --md-sys-typescale-display-large-font: var(--font-serif);
  --md-sys-typescale-display-medium-font: var(--font-serif);
  --md-sys-typescale-display-small-font: var(--font-serif);

  --md-sys-typescale-headline-large-font: var(--font-serif);
  --md-sys-typescale-headline-medium-font: var(--font-serif);
  --md-sys-typescale-headline-small-font: var(--font-serif);

  --md-sys-typescale-title-large-font: var(--font-serif);
  --md-sys-typescale-title-medium-font: var(--font-body);
  --md-sys-typescale-title-small-font: var(--font-body);

  --md-sys-typescale-body-large-font: var(--font-body);
  --md-sys-typescale-body-medium-font: var(--font-body);
  --md-sys-typescale-body-small-font: var(--font-body);

  --md-sys-typescale-label-large-font: var(--font-sans);
  --md-sys-typescale-label-medium-font: var(--font-sans);
  --md-sys-typescale-label-small-font: var(--font-sans);

  /* --- SPACING & SHAPE --- */
  --spacing-layout: 120px;
  --spacing-gap: 64px;

  --md-sys-shape-corner-full: 9999px;
  --md-sys-shape-corner-large: 32px;
  --md-sys-shape-corner-medium: 16px;

  /* --- COMPONENT TOKENS --- */
  --wy-controls-bar-bg: var(--md-sys-color-primary);
  --wy-controls-bar-fg: var(--md-sys-color-on-primary);
  --wy-controls-search-bg: var(--md-sys-color-surface-container-high);
  --wy-controls-toggle-bg: var(--md-sys-color-surface-container-high);
  --wy-controls-chip-text: color-mix(in srgb, var(--wy-controls-bar-fg) 60%, transparent);
  --wy-controls-chip-text-hover: var(--wy-controls-bar-fg);
  --wy-controls-chip-border: color-mix(in srgb, var(--wy-controls-bar-fg) 20%, transparent);
  --wy-controls-chip-border-hover: color-mix(in srgb, var(--wy-controls-bar-fg) 40%, transparent);
  --wy-controls-chip-hover-bg: color-mix(in srgb, var(--wy-controls-bar-fg) 5%, transparent);
  --wy-controls-chip-focus: color-mix(in srgb, var(--wy-controls-bar-fg) 50%, transparent);
  --wy-controls-chip-active-bg: #E8F5E9;
  --wy-controls-chip-active-fg: #2C4C3B;
  --wy-controls-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  --wy-filter-chip-text: var(--md-sys-color-on-background);
  --wy-filter-chip-text-hover: var(--md-sys-color-on-background);
  --wy-filter-chip-border: var(--md-sys-color-outline-variant);
  --wy-filter-chip-border-hover: var(--md-sys-color-outline);
  --wy-filter-chip-hover-bg: var(--md-sys-color-surface-variant);
  --wy-filter-chip-focus: var(--md-sys-color-primary);
  --wy-filter-chip-active-bg: var(--md-sys-color-primary);
  --wy-filter-chip-active-fg: var(--md-sys-color-on-primary);
  --wy-filter-chip-font-weight: 500;
  --wy-filter-chip-shadow: none;
  --wy-filter-chip-font-family: var(--font-sans);
  --wy-filter-chip-font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
  --wy-filter-chip-font-weight: 500;
  --wy-filter-chip-font-weight-active: 600;
  --wy-filter-chip-font-style: normal;
  --wy-filter-chip-padding: 8px 16px;
}

/* --- DARK MODE OVERRIDES --- */
/* Based on Visual Identity Guide v1.0 dark mode specification */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary: Hunter Green remains the accent color in dark mode */
    --md-sys-color-primary: #2D4E3C;
    --md-sys-color-on-primary: #FFFFFF;
    /* White text on Hunter Green */
    --md-sys-color-primary-container: #2D4E3C;
    /* Hunter Green container */
    --md-sys-color-on-primary-container: #FFFFFF;
    /* White text/icon on Hunter Green container */

    /* Background: Deep Dark (#161C19) */
    --md-sys-color-background: #161C19;
    --md-sys-color-on-background: #F5F2EA;
    /* Warm Clay text */

    /* Surface: Slightly lighter dark (#1E2622) */
    --md-sys-color-surface: #1E2622;
    --md-sys-color-on-surface: #F5F2EA;

    --md-sys-color-surface-variant: #2C3631;
    --md-sys-color-on-surface-variant: #F5F2EA;

    /* Surface containers: graduated dark tones */
    --md-sys-color-surface-container-lowest: #121714;
    --md-sys-color-surface-container-low: #161C19;
    --md-sys-color-surface-container: #1E2622;
    --md-sys-color-surface-container-high: #2C3631;
    --md-sys-color-surface-container-highest: #3E4944;

    --md-sys-color-secondary-container: #2C3631;
    --md-sys-color-on-secondary-container: #F5F2EA;

    /* Inverse: Light surface for dark mode overlays */
    --md-sys-color-inverse-surface: #F5F2EA;
    --md-sys-color-inverse-on-surface: #1E2622;

    /* Outlines: Hunter Green for borders, subtle variant for dividers */
    --md-sys-color-outline: #2D4E3C;
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.1);
    --md-sys-color-border-variant: rgba(255, 255, 255, 0.1);

    /* Text: Warm Clay (#F5F2EA) for main, muted for secondary */
    --md-sys-color-text-main: #F5F2EA;
    --md-sys-color-text-muted: rgba(245, 242, 234, 0.7);
  }
}