:root{
  /* Type */
  --font-display: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
  --font-body: "Manrope", "Avenir Next", "Avenir", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.16vw, 0.92rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.45vw, 1.38rem);
  --step-2: clamp(1.48rem, 1.28rem + 0.8vw, 1.82rem);
  --step-3: clamp(1.95rem, 1.5rem + 1.5vw, 2.78rem);

  /* Spacing */
  --space-1: 0.3rem;
  --space-2: 0.55rem;
  --space-3: 0.85rem;
  --space-4: 1.2rem;
  --space-5: 1.75rem;
  --space-6: 2.5rem;
  --space-7: 3.5rem;
  --space-8: 5rem;

  /* Radii */
  --r-1: 10px;
  --r-2: 16px;
  --r-3: 22px;

  /* Shadows */
  --shadow-1: 0 10px 26px rgba(5, 10, 20, 0.12);
  --shadow-2: 0 16px 40px rgba(5, 10, 20, 0.22);
  --shadow-3: 0 24px 56px rgba(5, 10, 20, 0.3);

  /* Layout */
  --container-md: 1160px;
  --page-gutter: clamp(var(--space-4), 5vw, var(--space-7));

  /* Color roles (default to dark shell until theme class resolves) */
  --bg: #0b1119;
  --bg-elevated: #0f1621;
  --ink: #edf2f8;
  --muted: #a8b2c4;
  --card: rgba(19, 28, 41, 0.86);
  --card-strong: rgba(21, 33, 49, 0.95);
  --border: rgba(67, 88, 113, 0.48);
  --border-strong: rgba(104, 136, 172, 0.72);

  --accent: #5fd0c8;
  --accent-strong: #39b8ae;
  --accent-ink: #041016;
  --accent-soft: rgba(95, 208, 200, 0.15);
  --surface-tint: rgba(95, 208, 200, 0.08);
  --surface-hover: rgba(95, 208, 200, 0.2);

  --success: #26c18f;
  --warn: #e7b043;
  --error: #df6969;

  /* Background language */
  --gradient-app:
    radial-gradient(circle at 8% 10%, rgba(95, 208, 200, 0.17), transparent 33%),
    radial-gradient(circle at 82% 0%, rgba(109, 153, 255, 0.15), transparent 30%),
    linear-gradient(180deg, #0b1119 0%, #0f1723 45%, #0b1119 100%);
  --gradient-hero: linear-gradient(145deg, rgba(109, 153, 255, 0.2), rgba(95, 208, 200, 0.06) 45%, rgba(13, 22, 34, 0.76));
  --gradient-panel: linear-gradient(180deg, rgba(95, 208, 200, 0.08), rgba(95, 208, 200, 0));
  --gradient-band: linear-gradient(180deg, rgba(19, 33, 48, 0.75), rgba(11, 17, 25, 0));
  --gradient-footer: linear-gradient(180deg, rgba(16, 26, 39, 0.7), rgba(11, 17, 25, 0));
}