/**
 * Material Design 3 (M3) Design System & Tokens
 * Brand Color: #69ce31 (Vibrant Leaf Green)
 * Theme: Dark Theme First with Tonal Elevation
 */

:root {
  /* Brand Core */
  --md-brand-primary: #69CE31;

  /* M3 Semantic Dark Colors */
  --md-sys-color-primary: #86DC52;
  --md-sys-color-on-primary: #0F3900;
  --md-sys-color-primary-container: #215405;
  --md-sys-color-on-primary-container: #A3F971;

  --md-sys-color-secondary: #BDCBAF;
  --md-sys-color-on-secondary: #283420;
  --md-sys-color-secondary-container: #3E4B35;
  --md-sys-color-on-secondary-container: #D9E7CB;

  --md-sys-color-tertiary: #70D6D3;
  --md-sys-color-on-tertiary: #003736;
  --md-sys-color-tertiary-container: #004F4E;
  --md-sys-color-on-tertiary-container: #8DF2EF;

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

  /* Surfaces & Tonal Elevation (Dark) */
  --md-sys-color-surface: #11140E;
  --md-sys-color-surface-dim: #11140E;
  --md-sys-color-surface-bright: #373A32;
  --md-sys-color-surface-container-lowest: #0C0F0A;
  --md-sys-color-surface-container-low: #191D16;
  --md-sys-color-surface-container: #1D211A;
  --md-sys-color-surface-container-high: #282B24;
  --md-sys-color-surface-container-highest: #32362E;
  --md-sys-color-surface-tint: #86DC52;

  /* Typography & Outlines */
  --md-sys-color-on-surface: #E1E4D9;
  --md-sys-color-on-surface-variant: #C3C8BB;
  --md-sys-color-outline: #8D9386;
  --md-sys-color-outline-variant: #43483E;
  --md-sys-color-scrim: #000000;

  /* State Layers */
  --md-sys-state-hover-primary: rgba(134, 220, 82, 0.08);
  --md-sys-state-focus-primary: rgba(134, 220, 82, 0.12);
  --md-sys-state-pressed-primary: rgba(134, 220, 82, 0.16);
  --md-sys-state-hover-surface: rgba(225, 228, 217, 0.06);
  --md-sys-state-pressed-surface: rgba(225, 228, 217, 0.12);

  /* Shape Tokens */
  --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;

  /* Typography Scale */
  --md-sys-typescale-display-large-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-display-large-size: 52px;
  --md-sys-typescale-display-large-weight: 800;
  --md-sys-typescale-display-large-line-height: 60px;

  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-weight: 700;
  --md-sys-typescale-headline-medium-line-height: 36px;

  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-weight: 700;
  --md-sys-typescale-title-large-line-height: 28px;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-weight: 600;
  --md-sys-typescale-title-medium-line-height: 24px;

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

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

  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-weight: 600;
  --md-sys-typescale-label-large-line-height: 20px;

  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-weight: 600;
  --md-sys-typescale-label-small-line-height: 16px;

  /* Motion & Easing Tokens */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);

  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;

  /* App Dimensions */
  --top-app-bar-height: 64px;
  --bottom-nav-bar-height: 72px;
}