:root {
  --color-bg: #050505;
  --color-surface: #070707;
  --color-surface-2: #080808;
  --color-surface-3: #0a0a0a;
  --color-surface-4: #0b0b0b;
  --color-surface-5: #0c0c0c;
  --color-surface-6: #0e0e0e;
  --color-surface-raised: #101010;

  --color-text: #f5f5f2;
  --color-text-strong: #ffffff;
  --color-text-soft: #c8ccce;
  --color-text-muted: #8c8c8a;
  --color-text-dim: #6f6f6d;
  --color-text-faint: #5f6670;
  --color-text-fainter: #5a5a58;

  --color-accent: #b7c4d3;
  --color-accent-soft: #9fb4c9;
  --color-gold: #cbb48a;
  --color-sell: #c98b8b;

  --color-border: #141414;
  --color-border-soft: #1a1a1a;
  --color-border-panel: #1c1c1c;
  --color-border-pill: #1f1f1f;
  --color-border-input: #232323;
  --color-border-strong: #2a2a2a;
  --color-border-hover: #2c2c2c;
  --color-border-hover-strong: #3a3a3a;
  --color-border-pro: #3a4550;

  --gradient-purple: linear-gradient(135deg, #e5dbf5 0%, #b7a0dc 55%, #9d86c9 100%);
  --gradient-steel: linear-gradient(180deg, #f5f5f2, #8f9aa6);
  --glow-accent: 0 0 10px var(--color-accent);

  --font-display: 'Instrument Sans', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 22px;
  --radius-pill: 999px;

  --nav-pad-x: 48px;
  --section-pad-x: 48px;
  --content-max: 1280px;
  --nav-height: 72px;

  /* Spacing scale on a 4px grid. A value off the grid was picked by eye, and eyes
     disagree with each other from one component to the next. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Vertical rhythm of a public block. The ladder is the whole point: every step
     between groups is larger than every step inside one, and that alone is what
     makes the structure readable without rules or boxes.

       block → block        112px  (two sections of --block-pad-y)
       heading group → content 40px
       content → content       32px
       card → card             20px
       inside a heading group  12–16px

     They are tokens rather than literals so the three widths below can scale the
     whole page at once instead of each component overriding itself. */
  --block-pad-y: var(--space-14);
  --block-content: var(--space-10);
  --block-stack: var(--space-8);
  --card-gap: var(--space-5);
  --card-pad: var(--space-7);

  --ease-reveal: cubic-bezier(0.22, 0.7, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 0.16s;
  --dur-modal: 0.28s;
  /* Exits are shorter than entrances and use the opposite curve: an ease-out
     played backwards hangs in place and then vanishes, which reads as a snap. */
  --dur-modal-exit: 0.18s;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-page: 0.4s;
}

@media (max-width: 1024px) {
  :root {
    --nav-pad-x: 28px;
    --section-pad-x: 28px;
    --block-pad-y: var(--space-12);
    --block-content: var(--space-8);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-pad-x: 20px;
    --section-pad-x: 20px;
    --block-pad-y: var(--space-10);
    --block-content: var(--space-7);
    --block-stack: var(--space-6);
  }
}

@media (max-width: 480px) {
  :root {
    --nav-pad-x: 16px;
    --section-pad-x: 16px;
    --nav-height: 60px;
  }
}