@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

@font-face {
  font-family: "Calling Code";
  src: url("../assets/fonts/CallingCode-Regular.woff2") format("woff2"),
       url("../assets/fonts/CallingCode-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --surface: #ffffff;
  --surface-subtle: #f2f6fa;
  --surface-raised: #ffffff;
  --surface-brand: #0c3558;
  --ink: #0c3558;
  --ink-muted: #44505f;
  --on-brand: #ffffff;
  --on-brand-muted: #bccbdc;
  --border: #d4dce6;
  --border-strong: #66758a;
  --action: #0c3558;
  --action-hover: #1d4c7a;
  --on-action: #ffffff;
  --accent: #4d97fb;
  --on-accent: #071f38;
  --accent-text: #1558b0;
  --beam: #2a86c8;
  --focus-ring: #0c3558;
  --success: #17703f;
  --success-bg: #e3f4ea;
  --warning: #8a5300;
  --warning-bg: #fff2d9;
  --danger: #b3261e;
  --danger-bg: #fde8e6;
  --info: #1b3a8a;
  --info-bg: #e6ecfb;
  --charcoal: #404040;

  /* Type */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Calling Code", ui-monospace, Menlo, Consolas, monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(12, 53, 88, 0.08);
  --shadow-md: 0 8px 24px rgba(12, 53, 88, 0.12);

  /* Layout */
  --content-width: 1200px;
}

/* Type scale utilities */
.display-xl { font: 800 64px/68px var(--font-sans); letter-spacing: -0.02em; margin: 0; }
.display-lg { font: 800 48px/54px var(--font-sans); letter-spacing: -0.02em; margin: 0; }
.heading-1 { font: 700 36px/42px var(--font-sans); letter-spacing: -0.015em; margin: 0; }
.heading-2 { font: 700 28px/34px var(--font-sans); letter-spacing: -0.01em; margin: 0; }
.heading-3 { font: 700 22px/28px var(--font-sans); margin: 0; }
.heading-4 { font: 700 18px/26px var(--font-sans); margin: 0; }
.body-lg { font: 400 18px/30px var(--font-sans); margin: 0; }
.body { font: 400 16px/26px var(--font-sans); margin: 0; }
.body-sm { font: 400 14px/22px var(--font-sans); margin: 0; }
.label { font: 600 14px/20px var(--font-sans); margin: 0; }
.caption { font: 500 12px/18px var(--font-sans); margin: 0; }
.eyebrow { font: 700 12px/16px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0; }
.data { font: 400 14px/22px var(--font-mono); margin: 0; }
.data-sm { font: 400 12px/18px var(--font-mono); margin: 0; }
.metric { font: 400 48px/52px var(--font-mono); letter-spacing: -0.02em; margin: 0; }

@media (max-width: 768px) {
  .display-xl { font-size: 40px; line-height: 46px; }
  .display-lg { font-size: 34px; line-height: 40px; }
  .heading-1 { font-size: 28px; line-height: 34px; }
  .heading-2 { font-size: 24px; line-height: 30px; }
  .metric { font-size: 36px; line-height: 40px; }
}