/* ─── MD3 Color Tokens ─── */
:root {
  --md-sys-color-primary: #2563EB;
  --md-sys-color-primary-container: #DBEAFE;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-on-primary-container: #1E3A8A;
  --md-sys-color-secondary: #0891B2;
  --md-sys-color-secondary-container: #CFFAFE;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-surface: #F8FAFC;
  --md-sys-color-surface-container: #FFFFFF;
  --md-sys-color-surface-container-low: #F1F5F9;
  --md-sys-color-surface-container-high: #E2E8F0;
  --md-sys-color-on-surface: #0F172A;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-outline: #CBD5E1;
  --md-sys-color-outline-variant: #E2E8F0;
  --md-sys-color-error: #DC2626;
  --md-sys-color-error-container: #FEE2E2;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-on-error-container: #7F1D1D;
  --md-sys-color-background: #F8FAFC;
  --md-sys-color-on-background: #0F172A;

  /* ─── Status Colors ─── */
  --color-status-accepted: #16A34A;
  --color-status-accepted-bg: #DCFCE7;
  --color-status-interested: #2563EB;
  --color-status-interested-bg: #DBEAFE;
  --color-status-not-interested: #EA580C;
  --color-status-not-interested-bg: #FFEDD5;
  --color-status-dnd: #DC2626;
  --color-status-dnd-bg: #FEE2E2;

  /* ─── Urgency Colors ─── */
  --color-urgency-high: #DC2626;
  --color-urgency-high-bg: #FEE2E2;
  --color-urgency-medium: #D97706;
  --color-urgency-medium-bg: #FEF3C7;
  --color-urgency-low: #16A34A;
  --color-urgency-low-bg: #DCFCE7;

  /* ─── Sidebar ─── */
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #F1F5F9;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 60px;
  --sidebar-text: #64748B;
  --sidebar-text-active: #1D4ED8;
  --sidebar-accent: #2563EB;
  --sidebar-accent-bg: #EFF6FF;
  --sidebar-section-label: #94A3B8;
  --topbar-height: 60px;
  --topbar-bg: #FFFFFF;

  /* ─── MD3 Typography Scale ─── */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;

  /* ─── MD3 Shape ─── */
  --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: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ─── Elevation shadows ─── */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --elevation-2: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --elevation-3: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);

  /* ─── Transitions ─── */
  --transition-standard: 200ms cubic-bezier(0.2, 0, 0, 1);
  --transition-emphasized: 300ms cubic-bezier(0.2, 0, 0, 1);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Google Sans', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── MD3 Component Overrides ─── */
md-filled-button {
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-container-shape: var(--md-sys-shape-corner-full);
}

md-outlined-button {
  --md-outlined-button-outline-color: var(--md-sys-color-outline);
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-full);
}

md-filled-text-field {
  --md-filled-text-field-container-color: var(--md-sys-color-surface-container-low);
  --md-filled-text-field-active-indicator-color: var(--md-sys-color-primary);
  --md-filled-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
  width: 100%;
}

md-elevated-card {
  --md-elevated-card-container-color: var(--md-sys-color-surface-container);
  --md-elevated-card-container-shape: var(--md-sys-shape-corner-large);
}

/* ─── Skeleton shimmer ─── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--md-sys-shape-corner-small);
}

/* ─── Scrollbar styling ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-on-surface-variant); }