/* ========================
   M3 DESIGN TOKENS
   Material Design 3 compliant token system
   Change values here to update the entire site
   ======================== */

:root {
  /* ---- COLOR ROLES (Dark Theme) ---- */
  /* Palette: #99FFCC (mint green) + #1E1E1E (charcoal) */

  /* Primary */
  --md-primary: #99FFCC;
  --md-on-primary: #003822;
  --md-primary-container: #005234;
  --md-on-primary-container: #b8ffe0;

  /* Secondary */
  --md-secondary: #b4ccbe;
  --md-on-secondary: #20352a;
  --md-secondary-container: #364b40;
  --md-on-secondary-container: #d0e8da;

  /* Tertiary */
  --md-tertiary: #a3cddc;
  --md-on-tertiary: #043543;
  --md-tertiary-container: #214c5a;
  --md-on-tertiary-container: #bfe9f8;

  /* Error */
  --md-error: #f2b8b5;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;

  /* Surface (tonal elevation based on #1E1E1E) */
  --md-surface: #1E1E1E;
  --md-surface-dim: #141414;
  --md-surface-bright: #3a3a3a;
  --md-surface-container-lowest: #111111;
  --md-surface-container-low: #1a1a1a;
  --md-surface-container: #242424;
  --md-surface-container-high: #2e2e2e;
  --md-surface-container-highest: #383838;
  --md-on-surface: #e6e6e6;
  --md-on-surface-variant: #a0a0a0;

  /* Outline */
  --md-outline: #6a6a6a;
  --md-outline-variant: #333333;
  --md-outline-phone: #1a1a1a;

  /* Inverse */
  --md-inverse-surface: #e6e6e6;
  --md-inverse-on-surface: #1E1E1E;
  --md-inverse-primary: #006d44;

  /* ---- TYPOGRAPHY SCALE (Major Third 1.25 ratio) ---- */

  /* Font families */
  --md-font-main: 'Montserrat', Arial, sans-serif;

  /* Letter-spacing tokens */
  --md-letter-spacing-default: 0;
  --md-letter-spacing-tight-small: -0.005em;  /* -0.5% */
  --md-letter-spacing-tight-medium: -0.015em; /* -1.5% */
  --md-letter-spacing-tight-large: -0.02em;   /* -2% */

  /* Display */
  --md-display-large-size: 3.8147rem;    /* 61.04px */
  --md-display-large-line: 4.5rem;       /* 72px */
  --md-display-large-weight: 400;
  --md-display-large-tracking: var(--md-letter-spacing-tight-large);

  --md-display-medium-size: 3.0518rem;   /* 48.83px */
  --md-display-medium-line: 3.75rem;     /* 60px */
  --md-display-medium-weight: 400;
  --md-display-medium-tracking: var(--md-letter-spacing-tight-large);

  --md-display-small-size: 2.4414rem;    /* 39.06px */
  --md-display-small-line: 3rem;         /* 48px */
  --md-display-small-weight: 400;
  --md-display-small-tracking: var(--md-letter-spacing-tight-large);

  /* Headline */
  --md-headline-large-size: 1.9531rem;   /* 31.25px */
  --md-headline-large-line: 2.5rem;      /* 40px */
  --md-headline-large-weight: 400;
  --md-headline-large-tracking: var(--md-letter-spacing-tight-large);

  --md-headline-medium-size: 1.5625rem;  /* 25px */
  --md-headline-medium-line: 2rem;       /* 32px */
  --md-headline-medium-weight: 400;
  --md-headline-medium-tracking: var(--md-letter-spacing-tight-medium);

  --md-headline-small-size: 1.25rem;     /* 20px */
  --md-headline-small-line: 1.75rem;     /* 28px */
  --md-headline-small-weight: 400;
  --md-headline-small-tracking: var(--md-letter-spacing-tight-medium);

  /* Title */
  --md-title-large-size: 1.25rem;        /* 20px */
  --md-title-large-line: 1.75rem;        /* 28px */
  --md-title-large-weight: 400;
  --md-title-large-tracking: var(--md-letter-spacing-tight-medium);

  --md-title-medium-size: 1rem;          /* 16px */
  --md-title-medium-line: 1.5rem;        /* 24px */
  --md-title-medium-weight: 500;
  --md-title-medium-tracking: var(--md-letter-spacing-tight-medium);

  --md-title-small-size: 0.8rem;         /* 12.8px */
  --md-title-small-line: 1.25rem;        /* 20px */
  --md-title-small-weight: 500;
  --md-title-small-tracking: var(--md-letter-spacing-tight-small);

  /* Body */
  --md-body-large-size: 1rem;            /* 16px */
  --md-body-large-line: 1.5rem;          /* 24px */
  --md-body-large-weight: 400;
  --md-body-large-tracking: var(--md-letter-spacing-default);

  --md-body-medium-size: 0.8rem;         /* 12.8px */
  --md-body-medium-line: 1.25rem;        /* 20px */
  --md-body-medium-weight: 400;
  --md-body-medium-tracking: var(--md-letter-spacing-default);

  --md-body-small-size: 0.64rem;         /* 10.24px */
  --md-body-small-line: 1rem;            /* 16px */
  --md-body-small-weight: 400;
  --md-body-small-tracking: var(--md-letter-spacing-default);

  /* Label */
  --md-label-large-size: 0.8rem;         /* 12.8px */
  --md-label-large-line: 1.25rem;        /* 20px */
  --md-label-large-weight: 500;
  --md-label-large-tracking: var(--md-letter-spacing-default);

  --md-label-medium-size: 0.64rem;       /* 10.24px */
  --md-label-medium-line: 1rem;          /* 16px */
  --md-label-medium-weight: 500;
  --md-label-medium-tracking: var(--md-letter-spacing-default);

  --md-label-small-size: 0.64rem;        /* 10.24px */
  --md-label-small-line: 1rem;           /* 16px */
  --md-label-small-weight: 500;
  --md-label-small-tracking: var(--md-letter-spacing-default);

  /* Weight */
  --md-weight-bold: 600;

  /* ---- ELEVATION (6 levels, M3 shadow values) ---- */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  --md-elevation-2: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-3: 0 11px 7px 0 rgba(0, 0, 0, 0.19), 0 13px 25px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-4: 0 14px 12px 0 rgba(0, 0, 0, 0.17), 0 20px 40px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-5: 0 17px 17px 0 rgba(0, 0, 0, 0.15), 0 27px 55px 0 rgba(0, 0, 0, 0.3);

  /* ---- SPACING (8px baseline grid) ---- */
  --md-spacing-1: 0.25rem;   /* 4px */
  --md-spacing-2: 0.5rem;    /* 8px */
  --md-spacing-3: 0.75rem;   /* 12px */
  --md-spacing-4: 1rem;      /* 16px */
  --md-spacing-5: 1.25rem;   /* 20px */
  --md-spacing-6: 1.5rem;    /* 24px */
  --md-spacing-8: 2rem;      /* 32px */
  --md-spacing-10: 2.5rem;   /* 40px */
  --md-spacing-12: 3rem;     /* 48px */
  --md-spacing-16: 4rem;     /* 64px */
  --md-spacing-20: 5rem;     /* 80px */
  --md-spacing-24: 6rem;     /* 96px */
  --md-spacing-32: 8rem;     /* 128px */
  --md-spacing-40: 10rem;    /* 160px */
  --md-spacing-48: 12rem;    /* 192px */
  --md-spacing-64: 16rem;    /* 256px */

  /* ---- SHAPE (border radius scale) ---- */
  --md-shape-none: 0;
  --md-shape-extra-small: 4px;
  --md-shape-small: 8px;
  --md-shape-medium: 12px;
  --md-shape-large: 16px;
  --md-shape-extra-large: 28px;
  --md-shape-phone: 40px;
  --md-shape-full: 9999px;

  /* ---- MOTION ---- */
  --md-motion-duration-short: 0.15s;
  --md-motion-duration-medium: 0.3s;
  --md-motion-duration-long: 0.5s;
  --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-motion-stagger-delay: 0.05s;  /* For staggered animations */

  /* ---- BUTTON SIZES (M3 Standard) ---- */
  /* Standard button heights */
  --md-button-height-small: 32px;
  --md-button-height-medium: 40px;   /* Default */
  --md-button-height-large: 48px;

  /* Button padding (achieves standard heights with label-large line-height of 20px) */
  --md-button-padding-y-small: 6px;   /* 6px + 20px + 6px = 32px */
  --md-button-padding-y-medium: 10px; /* 10px + 20px + 10px = 40px */
  --md-button-padding-y-large: 14px;  /* 14px + 20px + 14px = 48px */

  --md-button-padding-x-small: 12px;
  --md-button-padding-x-medium: 24px;
  --md-button-padding-x-large: 32px;

  /* Icon button standard size (touch target) */
  --md-icon-button-size: 40px;

  /* FAB sizes */
  --md-fab-size-small: 40px;
  --md-fab-size-medium: 56px;
  --md-fab-size-large: 96px;

  /* Switch size */
  --md-switch-width: 52px;

  /* ---- TOP APP BAR HEIGHTS ---- */
  --md-top-app-bar-height-small: 64px;
  --md-top-app-bar-height-medium: 112px;
  --md-top-app-bar-height-large: 152px;

  /* Navbar logo */
  --md-navbar-logo-height: 32px;

  /* Hero card */
  --md-hero-card-height: 600px;

  /* Auth card (login, register) */
  --md-auth-card-width: 400px;

  /* ---- INPUT & MENU SIZES ---- */
  /* Menu item height (matches button height) */
  --md-menu-item-height: 40px;

  /* Dropdown/Select field height */
  --md-input-field-height: 56px;

  /* Icon sizes */
  --md-icon-size-small: 18px;
  --md-icon-size-medium: 24px;
  --md-icon-size-large: 36px;

  /* Input field icon spacing */
  --md-input-icon-area: 48px;

  /* ---- COMPONENT WIDTHS ---- */
  --md-component-width-small: 280px;
  --md-component-width-medium: 360px;
  --md-component-width-large: 400px;
  --md-component-width-xlarge: 560px;

  /* ---- LIST & DROPDOWN MAX HEIGHTS ---- */
  --md-list-max-height: 320px;
  --md-list-max-height-large: 480px;

  /* ---- SCRIM & OVERLAY ---- */
  --md-scrim-light: rgba(0, 0, 0, 0.32);
  --md-scrim-medium: rgba(0, 0, 0, 0.4);
  --md-scrim-dark: rgba(0, 0, 0, 0.5);

  /* ---- STATE LAYERS (M3 Standard Opacity) ---- */
  --md-state-layer-opacity-hover: 0.08;
  --md-state-layer-opacity-focus: 0.12;
  --md-state-layer-opacity-pressed: 0.12;
  --md-state-layer-opacity-dragged: 0.16;

  /* ---- DIVIDER ---- */
  --md-divider-thickness: 1px;

  /* ---- ADDITIONAL SHAPE TOKENS ---- */
  --md-shape-extra-small-half: 2px;  /* Half of extra-small for subtle rounding */
  --md-shape-small-half: 3px;        /* Between extra-small and small */

  /* ---- WARNING COLORS (for alerts, password strength) ---- */
  --md-warning: #FFA726;
  --md-on-warning: #000000;
  --md-warning-container: #3e2723;
  --md-on-warning-container: #FFE0B2;

  /* ---- SEMANTIC COLORS (component-specific) ---- */
  --md-rating-active: #FFB400;  /* Star rating filled state */
  --md-media-background: #000000;  /* Video/media player background */
  --md-state-overlay-light: rgba(0, 0, 0, 0.1);  /* Light overlay for buttons/chips */

  /* ---- HOVER & INTERACTION STATE LAYERS ---- */
  --md-primary-hover-overlay: rgba(0, 109, 68, 0.15);  /* Primary color hover state */

  /* ---- ADDITIONAL SIZING TOKENS ---- */
  /* Small indicators and dots */
  --md-indicator-size-small: 8px;
  --md-indicator-size-medium: 10px;
  --md-indicator-size-large: 16px;

  /* Dropdown/Select arrow dimensions */
  --md-dropdown-arrow-width: 6px;
  --md-dropdown-arrow-height: 10px;

  /* Additional icon sizes (between existing tokens) */
  --md-icon-size-extra-small: 16px;
  --md-icon-size-medium-large: 28px;

  /* Avatar/Profile sizes (specific) */
  --md-avatar-size-small: 28px;
  --md-avatar-size-large: 96px;

  /* Carousel & Navigation button sizes */
  --md-carousel-button-size: 36px;
  --md-carousel-button-size-small: 36px;

  /* List item heights */
  --md-list-item-height-large: 72px;

  /* Skeleton loader dimensions */
  --md-skeleton-text-height: 14px;

  /* Specific component dimensions */
  --md-min-button-width: 112px;
  --md-max-tooltip-width: 200px;
  --md-min-dropdown-width: 100px;
  --md-max-content-height: 1000px;
  --md-scrollable-list-height: 200px;
  --md-textarea-min-height: 96px;
  --md-image-placeholder-height: 200px;
  --md-skeleton-button-width: 100px;
  --md-narrow-component-width: 60px;
  --md-card-min-width: 300px;  /* Responsive grid card minimum width */

  /* Interactive component dimensions */
  --md-slider-thumb-size: 20px;  /* Slider and range slider thumb size */
  --md-color-preset-size: 32px;  /* Color picker preset button size */

  /* Progress bar & strength indicator */
  --md-progress-bar-height: 4px;

  /* Positioning & spacing adjustments */
  --md-label-offset: -8px;  /* Floating label top offset */
  --md-dropdown-offset: 8px;  /* Dropdown distance from trigger */
  --md-icon-position-offset: 15px;  /* Icon positioning from edge */

  /* RESPONSIVE BREAKPOINTS (Documentation Only) */
  /* Note: CSS custom properties cannot be used in @media queries */
  /* These values are defined here as the single source of truth for breakpoint values */
  /* Actual usage in responsive.css:
     --md-breakpoint-mobile-small: 480px   → @media (max-width: 480px)
     --md-breakpoint-mobile: 767px         → @media (max-width: 767px)
     --md-breakpoint-tablet: 768px         → @media (min-width: 768px)
     --md-breakpoint-desktop: 1024px       → @media (min-width: 1024px)
  */
  --md-breakpoint-mobile-small: 480px;
  --md-breakpoint-mobile: 767px;
  --md-breakpoint-tablet: 768px;
  --md-breakpoint-desktop: 1024px;

  /* ---- NAVIGATION RAIL ---- */
  --md-nav-rail-width: 80px;
  --md-nav-rail-width-expanded: 256px;

  /* ---- LAYOUT ---- */
  --md-layout-max-width: 1200px;
  --md-header-height: 64px;  /* M3 top app bar height (same as small) */
}

/* ---- LIGHT THEME OVERRIDES ---- */
[data-theme="light"] {
  --md-primary: #7ed957;
  --md-on-primary: #ffffff;
  --md-primary-container: #8af7c4;
  --md-on-primary-container: #002112;

  --md-secondary: #4d6356;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #d0e8d8;
  --md-on-secondary-container: #0b1f15;

  --md-tertiary: #3d6471;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #c0e9f9;
  --md-on-tertiary-container: #001f28;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  --md-warning: #F57C00;
  --md-on-warning: #ffffff;
  --md-warning-container: #FFE0B2;
  --md-on-warning-container: #3e2723;

  --md-surface: #f8faf6;
  --md-surface-dim: #d8dbd4;
  --md-surface-bright: #f8faf6;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f2f5ee;
  --md-surface-container: #eceee9;
  --md-surface-container-high: #e6e9e3;
  --md-surface-container-highest: #e1e3de;
  --md-on-surface: #191c19;
  --md-on-surface-variant: #414942;

  --md-outline: #717971;
  --md-outline-variant: #c1c9bf;

  --md-inverse-surface: #2e312d;
  --md-inverse-on-surface: #eff1ec;
  --md-inverse-primary: #99FFCC;

  --md-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-2: 0 2px 2px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-3: 0 11px 7px 0 rgba(0, 0, 0, 0.06), 0 13px 25px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-4: 0 14px 12px 0 rgba(0, 0, 0, 0.05), 0 20px 40px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-5: 0 17px 17px 0 rgba(0, 0, 0, 0.04), 0 27px 55px 0 rgba(0, 0, 0, 0.12);
}