/* Google Material Design 3 Design System Tokens */
:root {
  /* Surfaces & Backgrounds */
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-dim: #f1f3f4;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafd;
  --md-sys-color-surface-container: #f0f4f9;
  --md-sys-color-surface-container-high: #e9eef6;
  --md-sys-color-surface-container-highest: #dfe3ea;

  /* Typography Colors */
  --md-sys-color-on-surface: #1f1f1f;
  --md-sys-color-on-surface-variant: #444746;
  --md-sys-color-inverse-surface: #2f3033;
  --md-sys-color-inverse-on-surface: #f1f0f4;

  /* Primary (Google Blue) */
  --md-sys-color-primary: #1a73e8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e8f0fe;
  --md-sys-color-on-primary-container: #174ea6;
  --md-sys-color-primary-hover: #1557b0;

  /* Secondary & Neutral Tones */
  --md-sys-color-secondary: #5f6368;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #f1f3f4;
  --md-sys-color-on-secondary-container: #3c4043;

  /* Borders & Dividers */
  --md-sys-color-outline: #dadce0;
  --md-sys-color-outline-variant: #eaecf0;

  /* Semantic Feedback */
  --md-sys-color-error: #d93025;
  --md-sys-color-error-container: #fce8e6;
  --md-sys-color-on-error-container: #c5221f;

  --md-sys-color-success: #1e8e3e;
  --md-sys-color-success-container: #e6f4ea;
  --md-sys-color-on-success-container: #137333;

  --md-sys-color-warning: #f9ab00;
  --md-sys-color-warning-container: #fef7e0;
  --md-sys-color-on-warning-container: #b06000;

  /* Elevations (Subtle Google Shadows) */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.06);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(60, 64, 67, 0.12), 0 2px 6px 2px rgba(60, 64, 67, 0.08);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(60, 64, 67, 0.12), 0 1px 3px 0 rgba(60, 64, 67, 0.16);

  /* Radii */
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 24px;
  --md-sys-shape-corner-full: 9999px;
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* Core Google Design Utility Classes (Guaranteed Static Safety Net) */
.bg-google-blue { background-color: #1a73e8 !important; }
.hover\:bg-google-blueHover:hover { background-color: #1557b0 !important; }
.active\:bg-google-blueActive:active { background-color: #174ea6 !important; }
.text-google-blue { color: #1a73e8 !important; }
.hover\:text-google-blue:hover { color: #1a73e8 !important; }
.hover\:text-google-blueHover:hover { color: #1557b0 !important; }
.border-google-blue { border-color: #1a73e8 !important; }
.focus\:ring-google-blue:focus { --tw-ring-color: #1a73e8 !important; }
.bg-google-blueSurface { background-color: #e8f0fe !important; }
.text-google-blueText { color: #174ea6 !important; }
.hover\:text-google-blueText:hover { color: #174ea6 !important; }

.bg-google-green { background-color: #137333 !important; }
.hover\:bg-google-greenHover:hover { background-color: #0d652d !important; }
.text-google-green { color: #137333 !important; }
.bg-google-greenSurface { background-color: #e6f4ea !important; }
.text-google-greenText { color: #0d652d !important; }

.bg-google-red { background-color: #d93025 !important; }
.hover\:bg-google-redHover:hover { background-color: #c5221f !important; }
.text-google-red { color: #d93025 !important; }
.bg-google-redSurface { background-color: #fce8e6 !important; }
.text-google-redText { color: #a50e0e !important; }

.bg-google-yellow { background-color: #b06000 !important; }
.bg-google-yellowSurface { background-color: #fef7e0 !important; }
.text-google-yellowText { color: #b06000 !important; }

.bg-google-bg { background-color: #f8fafd !important; }
.bg-google-surface { background-color: #ffffff !important; }
.border-google-border { border-color: #dadce0 !important; }
.border-google-borderSubtle { border-color: #eaecf0 !important; }
.text-google-textHigh { color: #1f1f1f !important; }
.text-google-textMed { color: #5f6368 !important; }
.text-google-textLow { color: #80868b !important; }