:root {
  --color-brand-orange: #e66510;
  --color-neutral-black: #1a1a1a;
  --color-neutral-gray-900: #0f0f0f;
  --color-neutral-silver-100: #e8e8e8;
  --color-neutral-silver-400: #9e9e9e;
  --color-neutral-silver-700: #5c5c5c;
  --color-white: #ffffff;
  --color-bg-soft: #fcfcfc;
  --color-surface-dark: #1e1e1e;
  --color-hero-scrim: rgba(5, 2, 0, 0.94);

  --font-sans: "Inter", sans-serif;
  --font-mono: "Chivo Mono", "Roboto Mono", ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 240px;

  --shadow-orange: 0 4px 8px rgba(230, 101, 16, 0.24);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08);
  --btn-sheen-angle: 62deg;

  --canvas: 1512px;
  --content: 1128px;
  --gutter: 192px;
  --header-width: min(1280px, calc(100% - 48px));
  --page-pad: max(24px, calc((100vw - var(--content)) / 2));
}

@media (max-width: 1100px) {
  :root {
    --header-width: calc(100% - 48px);
    --page-pad: 24px;
  }
}

@media (max-width: 720px) {
  :root {
    --header-width: calc(100% - 48px);
    --page-pad: 24px;
  }
}