:root {
  /* Brand */
  --solo-red: #E63947;
  --solo-red-deep: #A0192A;
  --solo-red-glow: rgba(230, 57, 71, 0.35);

  /* Surfaces */
  --bg-black: #0A0A0A;
  --bg-elevated: #141414;
  --bg-deep: #050505;
  --bg-light: #F4F4F2;
  --bg-light-elevated: #FFFFFF;

  /* Text */
  --text-primary: #FFFFFF;
  --text-muted: #9A9A9A;
  --text-dim: #5E5E5E;
  --text-ink: #0A0A0A;
  --text-ink-muted: #555555;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-red: rgba(230, 57, 70, 0.4);
  --border-ink: rgba(10, 10, 10, 0.12);

  /* Type */
  --font-display: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Oswald", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing (8pt) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 192px;

  /* Radii */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 12px;

  /* Shadows — red-tinted, never flat */
  --shadow-sm: 0 8px 24px -12px rgba(230, 57, 70, 0.18);
  --shadow-md: 0 20px 60px -20px rgba(230, 57, 70, 0.28);
  --shadow-lg: 0 40px 120px -30px rgba(230, 57, 70, 0.35);
  --shadow-ink: 0 20px 60px -25px rgba(0, 0, 0, 0.6);

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-h: 80px;
}