/**
 * Material Design 3 — Design Tokens
 * IELTS Webinar Landing Page (Event 4)
 */

:root {
  --md-sys-color-primary: #0284c7;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #bae6fd;
  --md-sys-color-on-primary-container: #0c4a6e;

  --md-sys-color-secondary: #0369a1;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e0f2fe;
  --md-sys-color-on-secondary-container: #0c4a6e;

  --md-sys-color-surface: #f0f9ff;
  --md-sys-color-on-surface: #0c1929;
  --md-sys-color-surface-variant: #e0f2fe;
  --md-sys-color-on-surface-variant: #475569;

  --md-sys-color-background: #f0f9ff;
  --md-sys-color-on-background: #0c1929;

  --grad-sky-1: #e0f2fe;
  --grad-sky-2: #bae6fd;
  --grad-sky-3: #7dd3fc;
  --grad-sky-4: #38bdf8;

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.35);

  --md-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --md-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  --md-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);

  --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;
}