/* Astra · design tokens
 * One dark theme only, the brand is black and silver.
 * Fonts load from Google Fonts in the page head. DM Sans for headlines and the wordmark,
 * Space Grotesk for body and interface, Space Mono for labels and figures
 * https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..600&family=Space+Grotesk:wght@400;500&family=Space+Mono&display=swap
 */
:root {
  color-scheme: dark;

  /* Color */
  --bg: #000000;            /* page, always pure black so the grain art blends in */
  --fg: #F5F5F7;            /* headlines and primary text */
  --text-2: #A1A1A6;        /* body copy */
  --text-3: #86868B;        /* eyebrows, captions */
  --text-4: #6E6E73;        /* footer and fine print */
  --line: #1D1D1F;          /* hairlines between sections */
  --line-2: #2C2C2E;        /* button and control borders */
  --silver-top: #FFFFFF;    /* headline gradient, top */
  --silver-bottom: #A8A8AE; /* headline gradient, bottom */
  --sheen: #6BA1E6;         /* the cool sheen inside the spheres. Art only, never UI */

  /* Type */
  --font-display: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;      /* headlines, wordmark */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;  /* body and interface */
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;                        /* labels and figures */
  --weight-light: 300;
  --weight-body: 400;
  --weight-strong: 600;     /* headlines, wordmark */
  --tracking-display: -0.042em;
  --tracking-heading: -0.03em;
  --tracking-eyebrow: 0.14em;

  /* Type scale, fluid between phone and desktop */
  --step-display: clamp(2.75rem, 1.6rem + 5.4vw, 6.75rem);  /* hero h1 */
  --step-h2: clamp(2rem, 1.35rem + 2.7vw, 3.75rem);         /* section headlines */
  --step-fact: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);     /* figures in the facts row */
  --step-lede: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);    /* hero subline */
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-small: 0.9375rem;
  --step-eyebrow: 0.8125rem;

  /* Space and layout */
  --gutter: clamp(20px, 5vw, 128px);   /* side padding, 128px at 1920 */
  --section: clamp(96px, 11vw, 192px); /* vertical rhythm between sections */
  --maxw: 1440px;                      /* content width */
  --measure: 36rem;                    /* running text */
  --pill: 999px;                       /* buttons are pills, nothing else is rounded */
}

/* Silver headline treatment */
.silver {
  background: linear-gradient(180deg, var(--silver-top) 22%, var(--silver-bottom) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fg);
}