/* =========================================================
   Google Material Design 3 (MD3) Design Tokens — LOOGS Brand
   Primary Seed: #006494 (Deep Operational Blue)
   Secondary Accent: #0f766e (Teal Assurance Accent)
   ========================================================= */
:root {
  /* MD3 Primary Colors (Brand Operational Blue) */
  --md-sys-color-primary: #006494;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e0f2fe;
  --md-sys-color-on-primary-container: #0369a1;
  --md-sys-color-primary-hover: #004b71;
  --md-sys-color-primary-active: #003450;

  /* MD3 Secondary Colors (Teal Assurance) */
  --md-sys-color-secondary: #0f766e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ccfbf1;
  --md-sys-color-on-secondary-container: #0f766e;

  /* MD3 Tertiary Colors (Indigo Operational) */
  --md-sys-color-tertiary: #4f46e5;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e0e7ff;
  --md-sys-color-on-tertiary-container: #3730a3;

  /* MD3 Neutral & Surface Colors */
  --md-sys-color-background: #f8fafc;
  --md-sys-color-on-background: #0f172a;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #0f172a;
  --md-sys-color-surface-variant: #f1f5f9;
  --md-sys-color-on-surface-variant: #475569;

  /* MD3 Outline & Borders */
  --md-sys-color-outline: #cbd5e1;
  --md-sys-color-outline-variant: #e2e8f0;

  /* MD3 State Alerts */
  --md-sys-color-success: #16a34a;
  --md-sys-color-success-container: #dcfce7;
  --md-sys-color-on-success-container: #15803d;

  --md-sys-color-warning: #d97706;
  --md-sys-color-warning-container: #fef3c7;
  --md-sys-color-on-warning-container: #92400e;

  --md-sys-color-error: #dc2626;
  --md-sys-color-error-container: #fee2e2;
  --md-sys-color-on-error-container: #991b1b;

  /* Typography System */
  --md-sys-font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-display-large: 700 32px/1.2 var(--md-sys-font-family);
  --md-sys-typescale-title-large: 700 18px/1.3 var(--md-sys-font-family);
  --md-sys-typescale-title-medium: 600 15px/1.4 var(--md-sys-font-family);
  --md-sys-typescale-body-medium: 400 14px/1.5 var(--md-sys-font-family);
  --md-sys-typescale-label-medium: 600 12px/1.4 var(--md-sys-font-family);

  /* MD3 Shape Corners */
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 24px;
  --md-sys-shape-corner-2xl: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* MD3 Elevations */
  --md-sys-elevation-1: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --md-sys-elevation-2: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --md-sys-elevation-3: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.04);
  --md-sys-elevation-4: 0 20px 32px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -8px rgba(15, 23, 42, 0.06);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--md-sys-font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}