/*
 * Material Design 3 Color System
 * Brand color: Dark Green (#006400)
 *
 * This file implements the full MD3 color token system
 * https://m3.material.io/styles/color/system/overview
 */

:root {
  /* ========================================
   * PRIMARY - Brand Dark Green
   * ======================================== */
  --md-sys-color-primary: #006400;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #9BF6A0;
  --md-sys-color-on-primary-container: #002200;

  /* ========================================
   * SECONDARY - Complementary Green
   * ======================================== */
  --md-sys-color-secondary: #52634F;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D5E8CF;
  --md-sys-color-on-secondary-container: #101F0F;

  /* ========================================
   * TERTIARY - Accent Blue
   * ======================================== */
  --md-sys-color-tertiary: #386667;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #BCEBEC;
  --md-sys-color-on-tertiary-container: #002021;

  /* ========================================
   * ERROR - Red
   * ======================================== */
  --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 & BACKGROUND
   * ======================================== */
  --md-sys-color-surface: #FCFDF7;
  --md-sys-color-on-surface: #1A1C19;
  --md-sys-color-surface-variant: #DEE5D8;
  --md-sys-color-on-surface-variant: #424940;

  --md-sys-color-background: #FCFDF7;
  --md-sys-color-on-background: #1A1C19;

  /* ========================================
   * SURFACE CONTAINERS (Elevation Levels)
   * ======================================== */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F6F7F1;
  --md-sys-color-surface-container: #F0F1EC;
  --md-sys-color-surface-container-high: #EAEBE6;
  --md-sys-color-surface-container-highest: #E5E6E0;

  /* ========================================
   * OUTLINE & BORDERS
   * ======================================== */
  --md-sys-color-outline: #72796F;
  --md-sys-color-outline-variant: #C2C9BD;

  /* ========================================
   * INVERSE COLORS (for dark surfaces)
   * ======================================== */
  --md-sys-color-inverse-surface: #2F312D;
  --md-sys-color-inverse-on-surface: #F1F1EB;
  --md-sys-color-inverse-primary: #7FDA85;

  /* ========================================
   * SURFACE TINTS & SHADOWS
   * ======================================== */
  --md-sys-color-surface-tint: #006400;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* ========================================
   * SUCCESS & WARNING (Custom Extensions)
   * ======================================== */
  --md-sys-color-success: #006400;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #9BF6A0;
  --md-sys-color-on-success-container: #002200;

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

  --md-sys-color-info: #2563EB;
  --md-sys-color-on-info: #FFFFFF;
  --md-sys-color-info-container: #DBEAFE;
  --md-sys-color-on-info-container: #1E3A8A;

  /* ========================================
   * OPACITY LEVELS (for state layers)
   * ======================================== */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;

  /* ========================================
   * ELEVATION (shadows)
   * ======================================== */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1:
    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2:
    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-4:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-5:
    0px 8px 12px 6px rgba(0, 0, 0, 0.15),
    0px 4px 4px 0px rgba(0, 0, 0, 0.3);

  /* ========================================
   * SHAPE (border radius)
   * ======================================== */
  --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: 9999px;

  /* ========================================
   * SPACING (consistent spacing system)
   * ======================================== */
  --md-sys-spacing-xs: 4px;
  --md-sys-spacing-sm: 8px;
  --md-sys-spacing-md: 16px;
  --md-sys-spacing-lg: 24px;
  --md-sys-spacing-xl: 32px;
  --md-sys-spacing-2xl: 48px;
  --md-sys-spacing-3xl: 64px;
}

/* ========================================
 * DARK MODE (Optional - for future use)
 * ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #7FDA85;
    --md-sys-color-on-primary: #003909;
    --md-sys-color-primary-container: #005313;
    --md-sys-color-on-primary-container: #9BF6A0;

    --md-sys-color-secondary: #B9CCB4;
    --md-sys-color-on-secondary: #243424;
    --md-sys-color-secondary-container: #3B4B39;
    --md-sys-color-on-secondary-container: #D5E8CF;

    --md-sys-color-tertiary: #A0CFD0;
    --md-sys-color-on-tertiary: #003738;
    --md-sys-color-tertiary-container: #1E4E4F;
    --md-sys-color-on-tertiary-container: #BCEBEC;

    --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: #1A1C19;
    --md-sys-color-on-surface: #E2E3DD;
    --md-sys-color-surface-variant: #424940;
    --md-sys-color-on-surface-variant: #C2C9BD;

    --md-sys-color-background: #1A1C19;
    --md-sys-color-on-background: #E2E3DD;

    --md-sys-color-surface-container-lowest: #0F110E;
    --md-sys-color-surface-container-low: #1A1C19;
    --md-sys-color-surface-container: #1E201D;
    --md-sys-color-surface-container-high: #282B27;
    --md-sys-color-surface-container-highest: #333632;

    --md-sys-color-outline: #8C9388;
    --md-sys-color-outline-variant: #424940;

    --md-sys-color-inverse-surface: #E2E3DD;
    --md-sys-color-inverse-on-surface: #2F312D;
    --md-sys-color-inverse-primary: #006400;

    --md-sys-color-surface-tint: #7FDA85;
  }
}

/* ========================================
 * UTILITY CLASSES
 * ======================================== */
.primary { color: var(--md-sys-color-primary); }
.on-primary { color: var(--md-sys-color-on-primary); }
.secondary { color: var(--md-sys-color-secondary); }
.on-secondary { color: var(--md-sys-color-on-secondary); }
.tertiary { color: var(--md-sys-color-tertiary); }
.on-tertiary { color: var(--md-sys-color-on-tertiary); }
.error { color: var(--md-sys-color-error); }
.success { color: var(--md-sys-color-success); }
.warning { color: var(--md-sys-color-warning); }
.info { color: var(--md-sys-color-info); }

.bg-primary { background-color: var(--md-sys-color-primary); }
.bg-surface { background-color: var(--md-sys-color-surface); }
.bg-surface-container { background-color: var(--md-sys-color-surface-container); }
.bg-secondary-container { background-color: var(--md-sys-color-secondary-container); }