/**
 * EIMBox Public Portal - Google Material Design 3 (M3) Deep Purple Token System
 * Official Color Palette, Surfaces, Tonal Elevations & Contrast
 */

:root {
  /* ========================================================================
     Typography Tokens
     ======================================================================== */
  --md-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-font-bengali: 'Noto Sans Bengali', sans-serif;

  /* ========================================================================
     Corner Radii (M3 Shapes)
     ======================================================================== */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 24px;
  --md-shape-full: 9999px;

  /* ========================================================================
     Transitions & Motion (M3 Easing)
     ======================================================================== */
  --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-transition-quick: 180ms var(--md-motion-standard);
  --md-transition-normal: 280ms var(--md-motion-standard);
  --md-transition-slow: 400ms var(--md-motion-standard);

  /* ========================================================================
     Default Theme: Light Mode (M3 Deep Purple)
     ======================================================================== */
  --md-primary: #6750A4;
  --md-primary-hover: #533B8E;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #EADDFF;
  --md-on-primary-container: #21005D;

  --md-secondary: #006C4C;
  --md-secondary-hover: #00553B;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #89F8C7;
  --md-on-secondary-container: #002114;

  --md-tertiary: #B07400;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFE08F;
  --md-on-tertiary-container: #2A1700;

  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;

  --md-surface: #FDF7FF;
  --md-on-surface: #1D1B20;
  --md-on-surface-variant: #49454E;

  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F7F1FB;
  --md-surface-container: #F1EBF5;
  --md-surface-container-high: #EBE5EE;
  --md-surface-container-highest: #E5DFE9;

  --md-outline: #7A757F;
  --md-outline-variant: #CAC4D0;
  --md-outline-subtle: rgba(103, 80, 164, 0.12);

  /* Elevation Shadows (Tonal Surface Shadows) */
  --md-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --md-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --md-elevation-3: 0 4px 12px 3px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  --md-elevation-4: 0 6px 16px 4px rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

/* ========================================================================
   Dark Theme (M3 Deep Purple Dark Baseline)
   ======================================================================== */
[data-theme="dark"] {
  --md-primary: #D0BCFF;
  --md-primary-hover: #E3D6FF;
  --md-on-primary: #381E72;
  --md-primary-container: #4F378B;
  --md-on-primary-container: #EADDFF;

  --md-secondary: #6CDBAC;
  --md-secondary-hover: #83E7BD;
  --md-on-secondary: #003825;
  --md-secondary-container: #005138;
  --md-on-secondary-container: #89F8C7;

  --md-tertiary: #FFBA28;
  --md-on-tertiary: #422B00;
  --md-tertiary-container: #604000;
  --md-on-tertiary-container: #FFE08F;

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

  --md-surface: #141218;
  --md-on-surface: #E6E1E5;
  --md-on-surface-variant: #CAC4D0;

  --md-surface-container-lowest: #0F0D13;
  --md-surface-container-low: #1D1B20;
  --md-surface-container: #211F24;
  --md-surface-container-high: #2B292F;
  --md-surface-container-highest: #36343A;

  --md-outline: #948F9A;
  --md-outline-variant: #49454E;
  --md-outline-subtle: rgba(208, 188, 255, 0.15);

  --md-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.18);
  --md-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.22);
  --md-elevation-3: 0 4px 14px 4px rgba(0, 0, 0, 0.38), 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  --md-elevation-4: 0 6px 20px 6px rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.28);
}