/**
 * Material Design 3 Expressive Tokens
 * Edu Vanguard - Realtime Multiple-Choice Quiz Platform
 * Developed by DST Team Developers
 * (Typography: Quicksand)
 */

:root {
  color-scheme: light;
  /* MD3 Color Palette - Edu Vanguard Emerald Forest Scheme */
  --md-sys-color-primary: #206A4D;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #A9F2CD;
  --md-sys-color-on-primary-container: #002114;
  
  --md-sys-color-secondary: #4D6357;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CFE9D9;
  --md-sys-color-on-secondary-container: #0A1F16;
  
  --md-sys-color-tertiary: #3D6373;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #C1E9FB;
  --md-sys-color-on-tertiary-container: #001F29;
  
  --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-success: #206A4D;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #A9F2CD;
  --md-sys-color-on-success-container: #002107;

  --md-sys-color-warning: #8b5000;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #FFF3D6;
  --md-sys-color-on-warning-container: #2c1600;
  
  --md-sys-color-surface: #F5FBF5;
  --md-sys-color-on-surface: #171D19;
  --md-sys-color-surface-variant: #DBE5DD;
  --md-sys-color-on-surface-variant: #404943;
  --md-sys-color-outline: #707973;
  --md-sys-color-outline-variant: #BFC9C1;

  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #EFF5EF;
  --md-sys-color-surface-container: #EAEFE9;
  --md-sys-color-surface-container-high: #E4EAE4;
  --md-sys-color-surface-container-highest: #DEE4DE;
  
  --md-sys-color-inverse-surface: #2C322E;
  --md-sys-color-inverse-on-surface: #EDF2EC;
  --md-sys-color-inverse-primary: #8DD5B2;
  
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* Expressive Accent Colors for Quiz Choices */
  --choice-a-bg: #e8f0fe;
  --choice-a-color: #1967d2;
  --choice-a-border: #aecbfa;

  --choice-b-bg: #fce8e6;
  --choice-b-color: #c5221f;
  --choice-b-border: #f6aea9;

  --choice-c-bg: #fef7e0;
  --choice-c-color: #ea8600;
  --choice-c-border: #fdd663;

  --choice-d-bg: #e6f4ea;
  --choice-d-color: #137333;
  --choice-d-border: #a8dab5;

  --choice-e-bg: #f3e8fd;
  --choice-e-color: #8430ce;
  --choice-e-border: #d7aefb;

  /* Typography Scale (Quicksand for all typography) */
  --md-ref-typeface-brand: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-ref-typeface-plain: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-ref-typeface-code: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --md-sys-typescale-display-large: 700 52px/60px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium: 700 42px/48px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small: 700 34px/40px var(--md-ref-typeface-brand);
  
  --md-sys-typescale-headline-large: 700 30px/38px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 600 26px/34px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 600 22px/30px var(--md-ref-typeface-brand);
  
  --md-sys-typescale-title-large: 600 20px/26px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium: 600 16px/24px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-small: 600 14px/20px var(--md-ref-typeface-brand);
  
  --md-sys-typescale-body-large: 500 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 500 12px/16px var(--md-ref-typeface-plain);
  
  --md-sys-typescale-label-large: 700 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 600 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 600 11px/16px var(--md-ref-typeface-plain);

  /* Shape Tokens */
  --md-shape-corner-none: 0px;
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 24px;
  --md-shape-corner-full: 9999px;

  /* Motion Curves (Material 3 Expressive) */
  --md-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --md-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-motion-duration-short: 150ms;
  --md-motion-duration-medium: 300ms;
  --md-motion-duration-long: 500ms;
}

/* Student Theme Tokens */
[data-theme="student"] {
  --student-mesh-1: #206A4D;
  --student-mesh-2: #3D6373;
  --student-mesh-3: #4D6357;
  --student-mesh-4: #123E2F;
  --student-card-bg: rgba(255, 255, 255, 0.95);
  --student-card-border: rgba(255, 255, 255, 0.7);
  --student-card-backdrop: blur(16px);
}

/* MD3 Dark Theme - Edu Vanguard Emerald Forest Night Scheme (from References/values-night/colors.xml) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #8DD5B2;
  --md-sys-color-on-primary: #003825;
  --md-sys-color-primary-container: #005138;
  --md-sys-color-on-primary-container: #A9F2CD;

  --md-sys-color-secondary: #B4CCBD;
  --md-sys-color-on-secondary: #1F352A;
  --md-sys-color-secondary-container: #364B40;
  --md-sys-color-on-secondary-container: #CFE9D9;

  --md-sys-color-tertiary: #A5CCDE;
  --md-sys-color-on-tertiary: #073543;
  --md-sys-color-tertiary-container: #244C5B;
  --md-sys-color-on-tertiary-container: #C1E9FB;

  --md-sys-color-error: #FF8577;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #690005;
  --md-sys-color-on-error-container: #FFDAD6;

  --md-sys-color-success: #8DD5B2;
  --md-sys-color-on-success: #003825;
  --md-sys-color-success-container: #005138;
  --md-sys-color-on-success-container: #A9F2CD;

  --md-sys-color-warning: #FFC107;
  --md-sys-color-on-warning: #412D00;
  --md-sys-color-warning-container: #5B4100;
  --md-sys-color-on-warning-container: #FFDEA2;

  --md-sys-color-surface: #0F1511;
  --md-sys-color-on-surface: #DEE4DE;
  --md-sys-color-surface-variant: #404943;
  --md-sys-color-on-surface-variant: #BFC9C1;
  --md-sys-color-outline: #8A938C;
  --md-sys-color-outline-variant: #404943;

  --md-sys-color-surface-container-lowest: #0A0F0C;
  --md-sys-color-surface-container-low: #171D19;
  --md-sys-color-surface-container: #1B211D;
  --md-sys-color-surface-container-high: #252B28;
  --md-sys-color-surface-container-highest: #303632;

  --md-sys-color-inverse-surface: #DEE4DE;
  --md-sys-color-inverse-on-surface: #2C322E;
  --md-sys-color-inverse-primary: #206A4D;

  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* Choice colors adjusted for dark background */
  --choice-a-bg: rgba(25, 103, 210, 0.22);
  --choice-a-color: #8ab4f8;
  --choice-a-border: rgba(174, 203, 250, 0.35);

  --choice-b-bg: rgba(197, 34, 31, 0.22);
  --choice-b-color: #f28b82;
  --choice-b-border: rgba(246, 174, 169, 0.35);

  --choice-c-bg: rgba(234, 134, 0, 0.22);
  --choice-c-color: #fdd663;
  --choice-c-border: rgba(253, 214, 99, 0.35);

  --choice-d-bg: rgba(19, 115, 51, 0.22);
  --choice-d-color: #81c995;
  --choice-d-border: rgba(168, 218, 181, 0.35);

  --choice-e-bg: rgba(132, 48, 206, 0.22);
  --choice-e-color: #c58af9;
  --choice-e-border: rgba(215, 174, 251, 0.35);
}

/* Smooth View Transition for Themes (GPU-accelerated, zero FPS drop) */
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(settings-theme-switcher),
::view-transition-new(settings-theme-switcher),
::view-transition-old(settings-lang-switcher),
::view-transition-new(settings-lang-switcher) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Comprehensive & GPU-optimized universal color, surface, and image transitions */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-property: background-color, color, border-color, outline-color, text-decoration-color, fill, stroke !important;
  transition-duration: 240ms !important;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
  transition-delay: 0s !important;
}

/* Explicitly transition filter and opacity for all images, logos, canvases and QR codes */
html.theme-transitioning img,
html.theme-transitioning canvas,
html.theme-transitioning .brand-logo-img,
html.theme-transitioning .auth-brand-logo,
html.theme-transitioning .brand-dst-text,
html.theme-transitioning .session-mini-qr-wrapper canvas,
html.theme-transitioning .session-pin-qr-card canvas,
html.theme-transitioning .qr-modal-frame canvas,
html.theme-transitioning #qr-modal-canvas canvas,
html.theme-transitioning #session-mini-qr-canvas canvas,
html.theme-transitioning #qr-preview-canvas canvas,
html.theme-transitioning #qr-canvas-container canvas {
  transition-property: filter, opacity, background-color, color, border-color !important;
  transition-duration: 240ms !important;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
  transition-delay: 0s !important;
}

/* Specific elevated surfaces that utilize box-shadow or surface containers */
html.theme-transitioning .teacher-card,
html.theme-transitioning .teacher-navbar,
html.theme-transitioning .m-bank-card,
html.theme-transitioning .m-session-header-card,
html.theme-transitioning .m-student-card,
html.theme-transitioning .m-question-card,
html.theme-transitioning .m-session-actions-bar,
html.theme-transitioning .session-tab-switcher-card,
html.theme-transitioning .m-chip,
html.theme-transitioning .top-search-input,
html.theme-transitioning .dialog,
html.theme-transitioning .top-search-box,
html.theme-transitioning .btn,
html.theme-transitioning .dropdown-menu,
html.theme-transitioning .settings-switcher-wrap,
html.theme-transitioning .m3-table-container,
html.theme-transitioning .stats-card,
html.theme-transitioning .m3-dialog,
html.theme-transitioning .modal-content {
  transition-property: background-color, color, border-color, box-shadow !important;
  transition-duration: 240ms !important;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
  transition-delay: 0s !important;
}

/* Explicitly preserve smooth 280ms transform sliding for Settings Segmented Switchers */
html.theme-transitioning .settings-switcher-indicator {
  transition: transform 280ms cubic-bezier(0.4, 0, 0, 1) !important;
}

html.theme-transitioning .settings-switcher-indicator::after {
  transition-property: background-color !important;
  transition-duration: 240ms !important;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
}