/* ==========================================================================
   Material 3 (Material You) Expressive Design Tokens
   Official M3 Tonal Palette & Expressive System
   ========================================================================== */

:root {
  /* Typescale & Fonts (Google Sans & Roboto) */
  --md-sys-font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --md-sys-font-mono: 'Roboto Mono', 'Fira Code', monospace;

  /* Shapes - M3 Expressive Rounding */
  --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: 20px;
  --md-sys-shape-corner-2xl: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Motion & Easings */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --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;

  /* Material Web Components Tokens */
  --md-icon-font: 'Material Symbols Rounded', 'Material Symbols Outlined';
  --md-ref-typeface-plain: var(--md-sys-font-family);
  --md-ref-typeface-brand: var(--md-sys-font-family);
  --md-sys-typescale-body-large-font: var(--md-sys-font-family);
  --md-sys-typescale-body-medium-font: var(--md-sys-font-family);
  --md-sys-typescale-body-small-font: var(--md-sys-font-family);
  --md-sys-typescale-label-large-font: var(--md-sys-font-family);
  --md-outlined-text-field-container-shape: 16px;
  --md-outlined-select-container-shape: 16px;
  --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;
}

/* ==========================================================================
   Light Mode (Material You Expressive Tones)
   ========================================================================== */
:root, [data-theme="light"] {
  --color-scheme: light;

  /* Primary (Google / M3 Vibrant Blue-Indigo) */
  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #041e49;

  /* Secondary (Muted Blue Slate) */
  --md-sys-color-secondary: #00639b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #c2e7ff;
  --md-sys-color-on-secondary-container: #001d35;

  /* Tertiary (Expressive Accent) */
  --md-sys-color-tertiary: #6e5676;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f7d8ff;
  --md-sys-color-on-tertiary-container: #271430;

  /* Error */
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  /* Success */
  --md-sys-color-success: #146c2e;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #c4eed0;
  --md-sys-color-on-success-container: #072711;

  /* Surface Hierarchy (Authentic M3 Surface Container Roles) */
  --md-sys-color-surface: #f8fafd;
  --md-sys-color-surface-dim: #d8dadf;
  --md-sys-color-surface-bright: #f8fafd;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f0f4f9;
  --md-sys-color-surface-container: #e9eef6;
  --md-sys-color-surface-container-high: #e3e8ef;
  --md-sys-color-surface-container-highest: #dde3ea;

  /* Text & Outlines */
  --md-sys-color-on-surface: #1f1f1f;
  --md-sys-color-on-surface-variant: #444746;
  --md-sys-color-outline: #747775;
  --md-sys-color-outline-variant: #c4c7c5;
  --md-sys-color-shadow: rgba(0, 0, 0, 0.06);

  /* State Layers */
  --md-sys-state-hover: rgba(11, 87, 208, 0.08);
  --md-sys-state-focus: rgba(11, 87, 208, 0.12);
  --md-sys-state-pressed: rgba(11, 87, 208, 0.14);

  /* Scrollbar Theme Variables */
  --md-scrollbar-track: var(--md-sys-color-surface-container-low);
  --md-scrollbar-thumb: var(--md-sys-color-outline-variant);
  --md-scrollbar-thumb-hover: var(--md-sys-color-outline);
  --md-scrollbar-thumb-active: var(--md-sys-color-primary);
}

/* ==========================================================================
   Dark Mode (Material You Expressive Dark)
   ========================================================================== */
[data-theme="dark"] {
  --color-scheme: dark;

  /* Primary */
  --md-sys-color-primary: #a8c7fa;
  --md-sys-color-on-primary: #062e6f;
  --md-sys-color-primary-container: #0842a0;
  --md-sys-color-on-primary-container: #d3e3fd;

  /* Secondary */
  --md-sys-color-secondary: #7fcfff;
  --md-sys-color-on-secondary: #003355;
  --md-sys-color-secondary-container: #004a77;
  --md-sys-color-on-secondary-container: #c2e7ff;

  /* Tertiary */
  --md-sys-color-tertiary: #dabfe2;
  --md-sys-color-on-tertiary: #3d2846;
  --md-sys-color-tertiary-container: #553f5d;
  --md-sys-color-on-tertiary-container: #f7d8ff;

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

  /* Success */
  --md-sys-color-success: #6dd58c;
  --md-sys-color-on-success: #0a3818;
  --md-sys-color-success-container: #0f5224;
  --md-sys-color-on-success-container: #c4eed0;

  /* Surface Hierarchy */
  --md-sys-color-surface: #111315;
  --md-sys-color-surface-dim: #111315;
  --md-sys-color-surface-bright: #37393b;
  --md-sys-color-surface-container-lowest: #0c0e10;
  --md-sys-color-surface-container-low: #191c1e;
  --md-sys-color-surface-container: #1e2023;
  --md-sys-color-surface-container-high: #282a2d;
  --md-sys-color-surface-container-highest: #333538;

  /* Text & Outlines */
  --md-sys-color-on-surface: #e2e2e5;
  --md-sys-color-on-surface-variant: #c4c7c5;
  --md-sys-color-outline: #8e918f;
  --md-sys-color-outline-variant: #444746;
  --md-sys-color-shadow: rgba(0, 0, 0, 0.4);

  /* State Layers */
  --md-sys-state-hover: rgba(168, 199, 250, 0.08);
  --md-sys-state-focus: rgba(168, 199, 250, 0.12);
  --md-sys-state-pressed: rgba(168, 199, 250, 0.14);

  /* Scrollbar Theme Variables */
  --md-scrollbar-track: var(--md-sys-color-surface-container-low);
  --md-scrollbar-thumb: var(--md-sys-color-outline-variant);
  --md-scrollbar-thumb-hover: var(--md-sys-color-outline);
  --md-scrollbar-thumb-active: var(--md-sys-color-primary);
}

/* ==========================================================================
   Global Theme-Aware Custom Scrollbars (Light & Dark Mode)
   ========================================================================== */
* {
  scrollbar-color: var(--md-scrollbar-thumb) var(--md-scrollbar-track);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--md-scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--md-scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid var(--md-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background: var(--md-scrollbar-thumb-active);
}

::-webkit-scrollbar-corner {
  background: var(--md-scrollbar-track);
}