/* Typography - Hanken Grotesk */

/* Font Face Declarations */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk/hanken-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk/hanken-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk/hanken-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk/hanken-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk/hanken-grotesk-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Design System Variables */
:root {
  /* Typography */
  --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale */
  --type-display-hero: 800 80px/1.05 var(--font-family);
  --type-display-large: 800 64px/1.1 var(--font-family);
  --type-display-medium: 800 48px/1.2 var(--font-family);
  --type-title-large: 700 32px/1.3 var(--font-family);
  --type-title-medium: 700 24px/1.4 var(--font-family);
  --type-body-large: 400 18px/1.6 var(--font-family);
  --type-body-medium: 400 16px/1.6 var(--font-family);
  --type-label: 500 14px/1.4 var(--font-family);
  --type-tagline: 500 20px/1.5 var(--font-family);
  --type-mono: 400 13px/1.6 var(--font-mono);

  /* Colors - Swiss minimalism */
  --color-background: #FFFFFF;
  --color-text: #111111;
  --color-accent: #E03E2F;
  --color-border: #E0E0E0;
  --color-gray-light: #999999;
  --color-terminal-bg: #111111;

  /* Spacing - 8dp grid system */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Shape */
  --radius-small: 2px;

  /* Layout */
  --container-max-width: 1080px;
}

/* Base Typography */
body {
  font-family: var(--font-family);
  background-color: var(--color-background);
  color: var(--color-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

/* Type Classes */
.type-display-hero {
  font: var(--type-display-hero);
  letter-spacing: -0.03em;
}

.type-display-large {
  font: var(--type-display-large);
  letter-spacing: -0.02em;
}

.type-display-medium {
  font: var(--type-display-medium);
  letter-spacing: -0.01em;
}

.type-title-large {
  font: var(--type-title-large);
}

.type-title-medium {
  font: var(--type-title-medium);
}

.type-body-large {
  font: var(--type-body-large);
}

.type-body-medium {
  font: var(--type-body-medium);
}

.type-label {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.type-tagline {
  font: var(--type-tagline);
}

/* Responsive Typography */
@media (max-width: 1024px) {
  :root {
    --type-display-hero: 800 64px/1.05 var(--font-family);
  }
}

@media (max-width: 640px) {
  :root {
    --type-display-hero: 800 48px/1.1 var(--font-family);
    --type-display-large: 800 48px/1.1 var(--font-family);
    --type-display-medium: 800 32px/1.2 var(--font-family);
    --type-title-large: 700 28px/1.3 var(--font-family);
    --type-title-medium: 700 20px/1.4 var(--font-family);
  }
}