/* =================================================================
   MD3 Design Tokens — EMS-1048 Dashboard
   Color roles, typography, spacing, shapes
   ================================================================= */

:root,
[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #B8C4FF;
  --md-sys-color-on-primary: #1A2B6D;
  --md-sys-color-primary-container: #2D3F80;
  --md-sys-color-on-primary-container: #DCE1FF;

  /* Secondary */
  --md-sys-color-secondary: #C3C5DD;
  --md-sys-color-on-secondary: #2D2F42;
  --md-sys-color-secondary-container: #434659;
  --md-sys-color-on-secondary-container: #DFE0F9;

  /* Tertiary */
  --md-sys-color-tertiary: #E4BAD4;
  --md-sys-color-on-tertiary: #43293B;
  --md-sys-color-tertiary-container: #5B3F52;
  --md-sys-color-on-tertiary-container: #FFD8EE;

  /* Error */
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;

  /* Surface hierarchy */
  --md-sys-color-background: #111318;
  --md-sys-color-on-background: #E2E2E9;
  --md-sys-color-surface: #131316;
  --md-sys-color-on-surface: #E5E1E9;
  --md-sys-color-surface-dim: #131316;
  --md-sys-color-surface-bright: #3A383E;
  --md-sys-color-surface-container-lowest: #0E0E11;
  --md-sys-color-surface-container-low: #1B1B1F;
  --md-sys-color-surface-container: #1E1F23;
  --md-sys-color-surface-container-high: #292A2E;
  --md-sys-color-surface-container-highest: #343539;

  /* Outline */
  --md-sys-color-outline: #8E9099;
  --md-sys-color-outline-variant: #44464F;

  /* Inverse */
  --md-sys-color-inverse-surface: #E5E1E9;
  --md-sys-color-inverse-on-surface: #313034;
  --md-sys-color-inverse-primary: #3058C8;

  /* Semantic colors */
  --color-success: #7BDB8E;
  --color-success-container: #1B3B22;
  --color-warning: #FFCC80;
  --color-warning-container: #3B2E14;
  --color-error: #FFB4AB;
  --color-error-container: #3B1418;
  --color-info: #B8C4FF;
  --color-info-container: #1E2740;

  /* Scrim & shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

[data-theme="light"] {
  --md-sys-color-primary: #3058C8;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #DCE1FF;
  --md-sys-color-on-primary-container: #001551;

  --md-sys-color-secondary: #5A5C72;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #DFE0F9;
  --md-sys-color-on-secondary-container: #171A2C;

  --md-sys-color-tertiary: #735069;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8EE;
  --md-sys-color-on-tertiary-container: #2B1224;

  --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: #FBF8FF;
  --md-sys-color-on-background: #1B1B1F;
  --md-sys-color-surface: #FBF8FF;
  --md-sys-color-on-surface: #1B1B1F;
  --md-sys-color-surface-dim: #DCD8E0;
  --md-sys-color-surface-bright: #FBF8FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F6F2FA;
  --md-sys-color-surface-container: #F0EDF5;
  --md-sys-color-surface-container-high: #EAE7EF;
  --md-sys-color-surface-container-highest: #E5E1E9;

  --md-sys-color-outline: #767680;
  --md-sys-color-outline-variant: #C6C5D0;

  --md-sys-color-inverse-surface: #313034;
  --md-sys-color-inverse-on-surface: #F3EFF7;
  --md-sys-color-inverse-primary: #B8C4FF;

  --color-success: #1B6E2D;
  --color-success-container: #D0F5D3;
  --color-warning: #7A5900;
  --color-warning-container: #FFDEA1;
  --color-error: #BA1A1A;
  --color-error-container: #FFDAD6;
  --color-info: #3058C8;
  --color-info-container: #DCE1FF;
}

/* Typography scale (using Roboto) */
:root {
  --md-sys-typescale-display-large: 500 2.25rem/2.75rem 'Roboto', sans-serif;
  --md-sys-typescale-display-medium: 500 1.75rem/2.25rem 'Roboto', sans-serif;
  --md-sys-typescale-headline-large: 500 1.5rem/2rem 'Roboto', sans-serif;
  --md-sys-typescale-headline-medium: 500 1.25rem/1.75rem 'Roboto', sans-serif;
  --md-sys-typescale-title-large: 500 1.125rem/1.5rem 'Roboto', sans-serif;
  --md-sys-typescale-title-medium: 500 1rem/1.5rem 'Roboto', sans-serif;
  --md-sys-typescale-title-small: 500 0.875rem/1.25rem 'Roboto', sans-serif;
  --md-sys-typescale-body-large: 400 1rem/1.5rem 'Roboto', sans-serif;
  --md-sys-typescale-body-medium: 400 0.875rem/1.25rem 'Roboto', sans-serif;
  --md-sys-typescale-body-small: 400 0.75rem/1rem 'Roboto', sans-serif;
  --md-sys-typescale-label-large: 500 0.875rem/1.25rem 'Roboto', sans-serif;
  --md-sys-typescale-label-medium: 500 0.75rem/1rem 'Roboto', sans-serif;
  --md-sys-typescale-label-small: 500 0.6875rem/1rem 'Roboto', sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */

  /* Corner radii — MD3 scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Sidebar dimensions */
  --sidebar-width: 220px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
}