/* Design tokens. Sourced 1:1 from reference/Design/Page_Definitions/design-language.md. */

:root {
  /* Color palette */
  --sg-white: #FAFAF8;
  --sg-cream: #F3F0EA;
  --sg-ink: #111318;
  --sg-steel: #5A6275;
  --sg-rule: #E4E2DC;
  --sg-hero-blue: #1A56DB;
  --sg-hero-blue-hover: #1447C0;
  --sg-hero-blue-light: #EEF3FD;
  --sg-hero-red: #C8202F;
  --sg-hero-red-light: #FEF0F1;
  --sg-cape-navy: #0F1623;

  /* Surfaces over dark */
  --sg-on-dark-fill: rgba(255, 255, 255, 0.05);
  --sg-on-dark-border: rgba(255, 255, 255, 0.08);
  --sg-on-dark-text-muted: rgba(255, 255, 255, 0.75);
  --sg-on-dark-text-quiet: rgba(255, 255, 255, 0.65);
  --sg-on-dark-rule: rgba(255, 255, 255, 0.2);

  /* Typography */
  --sg-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sg-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sg-font-serif: "Cinzel", "Times New Roman", serif;

  /* Type scale (desktop) */
  --sg-size-hero: clamp(48px, 6.5vw, 96px);
  --sg-size-h1: clamp(40px, 5.5vw, 88px);
  --sg-size-h2: clamp(32px, 4vw, 56px);
  --sg-size-h3: clamp(22px, 2.5vw, 30px);
  --sg-size-h4: clamp(18px, 1.6vw, 22px);
  --sg-size-stat: clamp(40px, 5vw, 72px);
  --sg-size-stat-card: clamp(32px, 4vw, 64px);
  --sg-size-pull: 24px;
  --sg-size-body: 17px;
  --sg-size-body-lg: 18px;
  --sg-size-body-sm: 15px;
  --sg-size-meta: 13px;
  --sg-size-eyebrow: 11px;
  --sg-size-caption: 12px;
  --sg-size-button: 14px;

  /* Weights */
  --sg-w-regular: 400;
  --sg-w-medium: 500;
  --sg-w-semibold: 600;
  --sg-w-bold: 700;
  --sg-w-black: 800;

  /* Letter spacing */
  --sg-ls-display: -0.04em;
  --sg-ls-tight: -0.02em;
  --sg-ls-snug: -0.01em;
  --sg-ls-button: 0.04em;
  --sg-ls-eyebrow: 0.14em;
  --sg-ls-caption: 0.08em;

  /* Line heights */
  --sg-lh-display: 1;
  --sg-lh-tight: 1.1;
  --sg-lh-snug: 1.3;
  --sg-lh-normal: 1.5;
  --sg-lh-relaxed: 1.6;
  --sg-lh-loose: 1.75;

  /* Layout */
  --sg-max-content: 1200px;
  --sg-max-narrow: 800px;
  --sg-max-wide: 1280px;
  --sg-gutter: 24px;
  --sg-nav-height: 72px;

  /* Section padding */
  --sg-section-pad-y: clamp(80px, 11vw, 180px);
  --sg-section-pad-y-md: clamp(64px, 8vw, 120px);
  --sg-section-pad-y-sm: clamp(48px, 6vw, 80px);

  /* Radii */
  --sg-radius-sm: 6px;
  --sg-radius-md: 8px;
  --sg-radius-lg: 12px;
  --sg-radius-xl: 16px;
  --sg-radius-card: 12px;
  --sg-radius-pill: 9999px;

  /* Borders */
  --sg-border-rule: 1px solid var(--sg-rule);
  --sg-border-rule-dark: 1px solid var(--sg-on-dark-border);
  --sg-border-card: 1px solid var(--sg-rule);

  /* Shadows */
  --sg-shadow-card: 0 2px 12px rgba(17, 19, 24, 0.06);
  --sg-shadow-card-hover: 0 4px 18px rgba(17, 19, 24, 0.10);
  --sg-shadow-letter: 0 4px 24px rgba(17, 19, 24, 0.08);

  /* Motion */
  --sg-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sg-duration-fast: 0.15s;
  --sg-duration: 0.2s;
  --sg-duration-slow: 0.4s;

  /* Z-index scale */
  --sg-z-nav: 100;
  --sg-z-modal-backdrop: 200;
  --sg-z-modal: 201;
}

/* Mobile token overrides */
@media (max-width: 768px) {
  :root {
    --sg-section-pad-y: clamp(64px, 14vw, 100px);
  }
}

/* Honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sg-duration-fast: 0s;
    --sg-duration: 0s;
    --sg-duration-slow: 0s;
  }
}