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

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

:root {
  /* Font families */
  --font-display: "Sora Variable", "Sora", Arial, sans-serif;
  --font-body: "Inter Variable", "Inter", "Segoe UI", Arial, sans-serif;
  --font-accent: Georgia, "Times New Roman", serif;
  --font-mono: Consolas, "Courier New", monospace;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Semantic type scale */
  --font-size-display: clamp(3rem, 6vw, 4.875rem);
  --font-size-headline-xl: clamp(2.75rem, 5.2vw, 4.375rem);
  --font-size-headline-lg: clamp(2.375rem, 4.6vw, 3.875rem);
  --font-size-headline-md: clamp(2rem, 3.5vw, 3rem);
  --font-size-headline-sm: 1.5rem;
  --font-size-subheadline: 1.125rem;
  --font-size-body-lg: 1.0625rem;
  --font-size-body: 0.9375rem;
  --font-size-body-sm: 0.8125rem;
  --font-size-caption: 0.75rem;
  --font-size-label: 0.6875rem;
  --font-size-micro: 0.5625rem;

  /* Line heights */
  --line-height-display: 0.98;
  --line-height-headline: 1.08;
  --line-height-subheadline: 1.5;
  --line-height-body: 1.7;
  --line-height-compact: 1.4;

  /* Letter spacing */
  --letter-spacing-display: -0.06em;
  --letter-spacing-headline: -0.05em;
  --letter-spacing-subheadline: -0.02em;
  --letter-spacing-label: 0.12em;
  --letter-spacing-wide: 0.17em;

  /* Brand blue scale */
  --color-brand-50: #eef3ff;
  --color-brand-100: #dce6ff;
  --color-brand-200: #becfff;
  --color-brand-300: #91aeff;
  --color-brand-400: #648aff;
  --color-brand-500: #3f68f1;
  --color-brand-600: #264ed2;
  --color-brand-700: #1f41af;
  --color-brand-800: #1d398c;
  --color-brand-900: #1d336e;
  --color-brand-950: #111d40;

  /* Neutral scale */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f9fc;
  --color-neutral-100: #eef1f6;
  --color-neutral-200: #d9deea;
  --color-neutral-300: #b5bdcc;
  --color-neutral-400: #8d96aa;
  --color-neutral-500: #667087;
  --color-neutral-600: #46516a;
  --color-neutral-700: #2d374f;
  --color-neutral-800: #1c253b;
  --color-neutral-900: #11172a;
  --color-neutral-950: #050a17;

  /* Semantic colors */
  --color-brand-primary: var(--color-brand-600);
  --color-brand-hover: var(--color-brand-500);
  --color-brand-accent: var(--color-brand-400);
  --color-brand-soft: var(--color-brand-50);

  --color-background-page: #f5f7fb;
  --color-background-surface: var(--color-neutral-0);
  --color-background-subtle: var(--color-neutral-50);
  --color-background-dark: #091127;
  --color-background-deep: var(--color-neutral-950);

  --color-hero-start: #050a17;
  --color-hero-middle: #10265c;
  --color-hero-end: #2f66e5;
  --color-hero-light: #a9c2ff;
  --color-hero-aperture: #08081e;
  --color-hero-loop: #dce6ff;

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-muted: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-inverse-muted: var(--color-neutral-300);

  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-inverse: rgb(255 255 255 / 15%);
  --color-focus: var(--color-brand-400);

  /* Shared layout tokens */
  --layout-max-width: 1920px;
  --layout-gutter: clamp(24px, 3.333vw, 64px);
  --layout-shell: min(
    var(--layout-max-width),
    calc(100% - var(--layout-gutter) - var(--layout-gutter))
  );
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Semantic radius */
  --radius-button: var(--radius-sm);
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --radius-pill: var(--radius-full);
}

/* Reusable semantic text styles */
.text-display {
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-headline-xl,
.text-headline-lg,
.text-headline-md,
.text-headline-sm {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-headline);
  letter-spacing: var(--letter-spacing-headline);
}

.text-headline-xl {
  font-size: var(--font-size-headline-xl);
}

.text-headline-lg {
  font-size: var(--font-size-headline-lg);
}

.text-headline-md {
  font-size: var(--font-size-headline-md);
}

.text-headline-sm {
  font-size: var(--font-size-headline-sm);
}

.text-subheadline {
  font-family: var(--font-body);
  font-size: var(--font-size-subheadline);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-subheadline);
  letter-spacing: var(--letter-spacing-subheadline);
}

.text-body-lg,
.text-body,
.text-body-sm {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
}

.text-body {
  font-size: var(--font-size-body);
}

.text-body-sm {
  font-size: var(--font-size-body-sm);
}

.text-label {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.text-technical {
  font-family: var(--font-mono);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-compact);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}