/* ==========================================================================
   Material Design 3 Expressive - Design Tokens
   Home Agent Wave 2
   ========================================================================== */

:root {
  /* --- M3 Color System: Dark Expressive Theme (Default) --- */
  color-scheme: dark;

  /* Primary Tonal Palette (Vibrant Indigo / Violet) */
  --md-sys-color-primary: #a5b4fc;
  --md-sys-color-on-primary: #1e1b4b;
  --md-sys-color-primary-container: #3730a3;
  --md-sys-color-on-primary-container: #e0e7ff;

  /* Secondary Tonal Palette (Emerald / Mint) */
  --md-sys-color-secondary: #6ee7b7;
  --md-sys-color-on-secondary: #064e3b;
  --md-sys-color-secondary-container: #065f46;
  --md-sys-color-on-secondary-container: #d1fae5;

  /* Tertiary Tonal Palette (Warm Amber / Sunset) */
  --md-sys-color-tertiary: #fcd34d;
  --md-sys-color-on-tertiary: #78350f;
  --md-sys-color-tertiary-container: #92400e;
  --md-sys-color-on-tertiary-container: #fef3c7;

  /* Error Tonal Palette */
  --md-sys-color-error: #fca5a5;
  --md-sys-color-on-error: #7f1d1d;
  --md-sys-color-error-container: #991b1b;
  --md-sys-color-on-error-container: #fee2e2;

  /* Neutral Surface Palette (Deep Slate / Dark Charcoal) */
  --md-sys-color-surface: #0b1120;
  --md-sys-color-on-surface: #f8fafc;
  --md-sys-color-surface-variant: #1e293b;
  --md-sys-color-on-surface-variant: #cbd5e1;

  /* M3 Surface Container Tiers (Elevations via color luminance) */
  --md-sys-color-surface-container-lowest: #020617;
  --md-sys-color-surface-container-low: #0f172a;
  --md-sys-color-surface-container: #1e293b;
  --md-sys-color-surface-container-high: #273549;
  --md-sys-color-surface-container-highest: #334155;

  /* Outlines & Dividers */
  --md-sys-color-outline: #475569;
  --md-sys-color-outline-variant: #334155;
  --md-sys-color-shadow: rgba(0, 0, 0, 0.45);
  --md-sys-color-scrim: rgba(0, 0, 0, 0.65);

  /* Expressive Accent Tints */
  --md-custom-bill-accent: #38bdf8;
  --md-custom-vehicle-accent: #a855f7;
  --md-custom-ader-accent: #f97316;
  --md-custom-system-accent: #10b981;

  /* --- M3 Typography Scale --- */
  --md-ref-typeface: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-ref-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Display */
  --md-sys-typescale-display-large: 700 3rem/3.5rem var(--md-ref-typeface);
  --md-sys-typescale-display-medium: 700 2.25rem/2.75rem var(--md-ref-typeface);
  --md-sys-typescale-display-small: 600 1.875rem/2.25rem var(--md-ref-typeface);

  /* Headline */
  --md-sys-typescale-headline-large: 600 1.5rem/2rem var(--md-ref-typeface);
  --md-sys-typescale-headline-medium: 600 1.25rem/1.75rem var(--md-ref-typeface);
  --md-sys-typescale-headline-small: 600 1.125rem/1.5rem var(--md-ref-typeface);

  /* Title */
  --md-sys-typescale-title-large: 600 1.125rem/1.5rem var(--md-ref-typeface);
  --md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface);
  --md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface);

  /* Body */
  --md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface);
  --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface);
  --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface);

  /* Label */
  --md-sys-typescale-label-large: 600 0.875rem/1.25rem var(--md-ref-typeface);
  --md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface);
  --md-sys-typescale-label-small: 500 0.6875rem/0.875rem var(--md-ref-typeface);

  /* --- M3 Elevation Levels --- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --md-sys-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --md-sys-elevation-3: 0 4px 12px 3px rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --md-sys-elevation-4: 0 8px 24px 4px rgba(0, 0, 0, 0.4), 0 2px 4px 0 rgba(0, 0, 0, 0.45);
  --md-sys-elevation-5: 0 12px 36px 6px rgba(0, 0, 0, 0.45), 0 4px 8px 0 rgba(0, 0, 0, 0.5);

  /* --- M3 Shape Tokens (Expressive Curves) --- */
  --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: 24px;
  --md-sys-shape-corner-extra-large-increased: 28px;
  --md-sys-shape-corner-full: 9999px;

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

/* ==========================================================================
   Material Symbols Rounded - M3 Expressive Iconography
   ========================================================================== */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  src: url('/fonts/material-symbols-rounded.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/materialsymbolsrounded/v374/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2') format('woff2');
  font-display: swap;
}

.material-symbols-rounded, .m3-icon {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  flex-shrink: 0;
}

/* Filled Icon Variant (e.g. for active navigation or highlighted states) */
.m3-icon.filled,
.m3-rail-item.active .m3-icon,
.m3-bottom-item.active .m3-icon,
.m3-chip.active .m3-icon {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Icon Sizing Scales */
.m3-icon.xs { font-size: 16px; width: 16px; height: 16px; }
.m3-icon.sm { font-size: 18px; width: 18px; height: 18px; }
.m3-icon.md { font-size: 24px; width: 24px; height: 24px; }
.m3-icon.lg { font-size: 32px; width: 32px; height: 32px; }
.m3-icon.xl { font-size: 40px; width: 40px; height: 40px; }
.m3-icon.xxl { font-size: 48px; width: 48px; height: 48px; }

/* Spinning Icon for Syncing & Loading */
.m3-icon.spinning {
  animation: m3-icon-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes m3-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}