@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk Variable";
  src: url("../fonts/space-grotesk-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Approved brand palette */
    --ovi-ink: #0d1b2a;
    --ovi-blue: #2563eb;
    --ovi-teal: #14b8a6;
    --ovi-sky: #7db6e8;
    --ovi-mist: #e6eaf1;
    --ovi-slate: #475569;

    /* Semantic aliases derived from the approved palette */
    --color-canvas: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-soft: #f1f5f9;
    --color-surface-blue: #eff6ff;
    --color-text: var(--ovi-ink);
    --color-text-muted: var(--ovi-slate);
    --color-border: var(--ovi-mist);
    --color-border-strong: #cbd5e1;
    --color-action: var(--ovi-blue);
    --color-action-hover: #1d4ed8;
    --color-accent: var(--ovi-teal);
    --color-accent-strong: #0f766e;
    --color-positive: #0f766e;
    --color-warning: #b45309;
    --color-danger: #dc2626;

    --gradient-brand: linear-gradient(135deg, var(--ovi-blue) 0%, #1686d9 48%, var(--ovi-teal) 100%);
    --gradient-night: linear-gradient(145deg, #071320 0%, var(--ovi-ink) 48%, #123866 100%);
    --gradient-wash: linear-gradient(135deg, rgb(37 99 235 / 10%) 0%, rgb(125 182 232 / 8%) 48%, rgb(20 184 166 / 12%) 100%);

    --font-heading: "Space Grotesk Variable", "Avenir Next", "Segoe UI", sans-serif;
    --font-body: "Inter Variable", Inter, "Segoe UI", sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
    --text-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
    --text-3xl: clamp(2.25rem, 1.65rem + 2.6vw, 4rem);
    --text-display: clamp(3rem, 2rem + 4.25vw, 6rem);

    --leading-tight: 1.04;
    --leading-heading: 1.14;
    --leading-body: 1.7;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgb(13 27 42 / 6%);
    --shadow-sm: 0 12px 30px rgb(13 27 42 / 8%);
    --shadow-md: 0 22px 60px rgb(13 27 42 / 12%);
    --shadow-blue: 0 18px 45px rgb(37 99 235 / 24%);

    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 600ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --shell: 75rem;
    --shell-narrow: 52rem;
    --header-height: 5rem;
  }
}