/**
 * Material Design 3 (Material You) Design System Tokens
 * Fully compliant with MD3 color, elevation, shape, and typography specs
 */

:root {
  /* MD3 Light Theme Colors (Default) */
  --md-sys-color-primary: #00639b;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cee5ff;
  --md-sys-color-on-primary-container: #001d32;

  --md-sys-color-secondary: #51606f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d5e4f7;
  --md-sys-color-on-secondary-container: #0e1d2a;

  --md-sys-color-tertiary: #65587b;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ebdcff;
  --md-sys-color-on-tertiary-container: #201634;

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

  --md-sys-color-background: #f8f9ff;
  --md-sys-color-on-background: #191c20;

  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #dee3eb;
  --md-sys-color-on-surface-variant: #42474e;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fa;
  --md-sys-color-surface-container: #eceef5;
  --md-sys-color-surface-container-high: #e6e8ef;
  --md-sys-color-surface-container-highest: #e1e2e9;

  --md-sys-color-outline: #72777f;
  --md-sys-color-outline-variant: #c2c7cf;

  --md-sys-color-shadow: rgba(0, 0, 0, 0.2);
  --md-sys-color-scrim: rgba(0, 0, 0, 0.4);
  --md-sys-color-inverse-surface: #2e3036;
  --md-sys-color-inverse-on-surface: #f0f0f7;

  /* Sticky Notes Tonal Palettes (Light) */
  --sticky-yellow: #fff9c4;
  --sticky-yellow-border: #fbc02d;
  --sticky-yellow-text: #574400;

  --sticky-cyan: #e0f7fa;
  --sticky-cyan-border: #00acc1;
  --sticky-cyan-text: #004d40;

  --sticky-purple: #f3e5f5;
  --sticky-purple-border: #ba68c8;
  --sticky-purple-text: #4a148c;

  --sticky-green: #e8f5e9;
  --sticky-green-border: #81c784;
  --sticky-green-text: #1b5e20;

  --sticky-pink: #fce4ec;
  --sticky-pink-border: #f06292;
  --sticky-pink-text: #880e4f;

  --sticky-orange: #fff3e0;
  --sticky-orange-border: #ffb74d;
  --sticky-orange-text: #e65100;

  /* MD3 Elevation Shadows */
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.20);
  --md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.12), 0px 2px 3px 0px rgba(0, 0, 0, 0.20);
  --md-sys-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.20);

  /* MD3 Corner Shapes */
  --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;

  /* Transitions */
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-duration-long: 350ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0.1, 1);
}

/* MD3 Dark Theme Colors */
[data-theme="dark"] {
  --md-sys-color-primary: #90cdff;
  --md-sys-color-on-primary: #003353;
  --md-sys-color-primary-container: #004b76;
  --md-sys-color-on-primary-container: #cee5ff;

  --md-sys-color-secondary: #b8c8da;
  --md-sys-color-on-secondary: #233240;
  --md-sys-color-secondary-container: #3a4857;
  --md-sys-color-on-secondary-container: #d5e4f7;

  --md-sys-color-tertiary: #d0c0e8;
  --md-sys-color-on-tertiary: #362b4b;
  --md-sys-color-tertiary-container: #4d4162;
  --md-sys-color-on-tertiary-container: #ebdcff;

  --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-background: #111318;
  --md-sys-color-on-background: #e1e2e9;

  --md-sys-color-surface: #111318;
  --md-sys-color-on-surface: #e1e2e9;
  --md-sys-color-surface-variant: #42474e;
  --md-sys-color-on-surface-variant: #c2c7cf;

  --md-sys-color-surface-container-lowest: #0c0e13;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2024;
  --md-sys-color-surface-container-high: #282a2f;
  --md-sys-color-surface-container-highest: #33353a;

  --md-sys-color-outline: #8c9199;
  --md-sys-color-outline-variant: #42474e;

  --md-sys-color-shadow: rgba(0, 0, 0, 0.5);
  --md-sys-color-scrim: rgba(0, 0, 0, 0.7);
  --md-sys-color-inverse-surface: #e1e2e9;
  --md-sys-color-inverse-on-surface: #191c20;

  /* Sticky Notes Tonal Palettes (Dark) */
  --sticky-yellow: #3e3818;
  --sticky-yellow-border: #a89000;
  --sticky-yellow-text: #fff275;

  --sticky-cyan: #123338;
  --sticky-cyan-border: #00838f;
  --sticky-cyan-text: #80deea;

  --sticky-purple: #341c38;
  --sticky-purple-border: #8e24aa;
  --sticky-purple-text: #e1bee7;

  --sticky-green: #19331e;
  --sticky-green-border: #43a047;
  --sticky-green-text: #a5d6a7;

  --sticky-pink: #3d1b28;
  --sticky-pink-border: #d81b60;
  --sticky-pink-text: #f48fb1;

  --sticky-orange: #3e2716;
  --sticky-orange-border: #fb8c00;
  --sticky-orange-text: #ffcc80;

  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35), 0px 1px 2px 0px rgba(0, 0, 0, 0.45);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.35), 0px 1px 2px 0px rgba(0, 0, 0, 0.45);
  --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
  --md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.4), 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  --md-sys-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.55);
}