:root {
  --surface-0: #14152B;
  --surface-1: #1E1F3D;
  --surface-2: #2A2C52;
  --surface-3: #353871;
  --border:    #3D406B;

  --text:       #F2F3FA;
  --text-muted: #A1A4C2;

  --primary:   #FF6B9D;
  --primary-hi:#FF87B0;
  --secondary: #4ECDC4;
  --success:   #95E06C;
  --warning:   #FFD166;
  --error:     #FF6B6B;

  --f-lum:  #E8E8F0;
  --f-red:  #FF6B6B;
  --f-green:#95E06C;
  --f-blue: #6BB6FF;
  --f-ha:   #FF477E;
  --f-oiii: #4ECDC4;
  --f-sii:  #FF8C42;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 14px;
  --shadow-card:  0 6px 24px rgba(0,0,0,0.55);
  --shadow-hover: 0 10px 32px rgba(0,0,0,0.65);

  --font-prop: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container-max: 1200px;
  --page-gutter: clamp(20px, 4vw, 48px);

  --size-h1: clamp(36px, 5vw, 56px);
  --size-h2: clamp(26px, 3.2vw, 36px);
  --size-h3: 22px;
  --size-body: 16px;
  --size-small: 13.5px;
  --size-mono: 14px;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations"),
       url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}