/* Frontier tokens — combined & self-contained */
/* Fonts are loaded via <link> in index.html */

/* ── Frontier color tokens (xAI-inspired) ────────────────────────────
   Dark-canvas only. White is the primary "color"; accents are reserved
   for illustration and rarely touch the marketing surface. */
:root {
  /* Brand / primary */
  --color-primary: #ffffff;
  --color-on-primary: #0a0a0a;

  /* Text */
  --color-ink: #ffffff;
  --color-ink-hover: #fafaf7;
  --color-body: #dadbdf;
  --color-body-mid: #7d8187;
  --color-mute: #7d8187;

  /* Surface */
  --color-canvas: #0a0a0a;
  --color-canvas-soft: #1a1c20;
  --color-canvas-card: #191919;
  --color-canvas-mid: #363a3f;
  --color-hairline: #212327;

  /* Translucent white — the true outline-pill border at runtime */
  --border-pill: rgba(255, 255, 255, 0.25);

  /* Accents (illustration only) */
  --color-accent-sunset: #ff7a17;
  --color-accent-sunset-soft: #ffc285;
  --color-accent-dusk: #7c3aed;
  --color-accent-twilight: #c4b5fd;
  --color-accent-breeze: #a0c3ec;
  --color-accent-midnight: #0d1726;

  /* Semantic aliases */
  --surface-page: var(--color-canvas);
  --surface-card: var(--color-canvas-card);
  --surface-soft: var(--color-canvas-soft);
  --surface-nested: var(--color-canvas-mid);
  --text-strong: var(--color-ink);
  --text-body: var(--color-body);
  --text-mute: var(--color-body-mid);
  --border-hairline: var(--color-hairline);
}


/* ── Frontier typography tokens ──────────────────────────────────────
   Universal Sans (→ Inter) weight 400 for all display/body/button.
   Geist Mono uppercase + positive tracking for eyebrows/labels.
   Negative tracking on display sizes is the signature; keep it. */
:root {
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* Display ladder — weight 400, tight negative tracking */
  --display-xl-size: 96px;   --display-xl-lh: 96px;   --display-xl-ls: -2.4px;
  --display-lg-size: 72px;   --display-lg-lh: 72px;   --display-lg-ls: -1.8px;
  --display-md-size: 48px;   --display-md-lh: 48px;   --display-md-ls: -1.2px;
  --display-sm-size: 32px;   --display-sm-lh: 36px;   --display-sm-ls: -0.6px;
  --display-xs-size: 20px;   --display-xs-lh: 28px;   --display-xs-ls: 0; /* @kind other */

  /* Body */
  --body-lg-size: 18px;  --body-lg-lh: 28px;
  --body-md-size: 16px;  --body-md-lh: 24px;
  --body-sm-size: 14px;  --body-sm-lh: 20px;

  /* Mono captions — uppercase, positive tracking */
  --caption-mono-size: 14px;     --caption-mono-lh: 20px;   --caption-mono-ls: 1.4px;
  --caption-mono-sm-size: 12px;  --caption-mono-sm-lh: 16px; --caption-mono-sm-ls: 1.2px;

  /* Button */
  --button-size: 14px;  --button-lh: 20px;

  --weight-regular: 400;
}

/* Optional utility classes mirroring the type ladder */
.fx-display-xl{font-family:var(--font-display);font-weight:400;font-size:var(--display-xl-size);line-height:var(--display-xl-lh);letter-spacing:var(--display-xl-ls)}
.fx-display-lg{font-family:var(--font-display);font-weight:400;font-size:var(--display-lg-size);line-height:var(--display-lg-lh);letter-spacing:var(--display-lg-ls)}
.fx-display-md{font-family:var(--font-display);font-weight:400;font-size:var(--display-md-size);line-height:var(--display-md-lh);letter-spacing:var(--display-md-ls)}
.fx-display-sm{font-family:var(--font-display);font-weight:400;font-size:var(--display-sm-size);line-height:var(--display-sm-lh);letter-spacing:var(--display-sm-ls)}
.fx-display-xs{font-family:var(--font-display);font-weight:400;font-size:var(--display-xs-size);line-height:var(--display-xs-lh)}
.fx-body-lg{font-family:var(--font-body);font-weight:400;font-size:var(--body-lg-size);line-height:var(--body-lg-lh)}
.fx-body-md{font-family:var(--font-body);font-weight:400;font-size:var(--body-md-size);line-height:var(--body-md-lh)}
.fx-body-sm{font-family:var(--font-body);font-weight:400;font-size:var(--body-sm-size);line-height:var(--body-sm-lh)}
.fx-caption-mono{font-family:var(--font-mono);font-weight:400;font-size:var(--caption-mono-size);line-height:var(--caption-mono-lh);letter-spacing:var(--caption-mono-ls);text-transform:uppercase}
.fx-caption-mono-sm{font-family:var(--font-mono);font-weight:400;font-size:var(--caption-mono-sm-size);line-height:var(--caption-mono-sm-lh);letter-spacing:var(--caption-mono-sm-ls);text-transform:uppercase}


/* ── Frontier spacing (4px base) ─────────────────────────────────── */
:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  --container-max: 1200px;
}


/* ── Frontier radius & elevation ─────────────────────────────────────
   No shadows anywhere — hairline borders carry all elevation. */
:root {
  --radius-none: 0px;
  --radius-sm: 8px;   /* card chrome — the brand --radius */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Elevation is border-only. Kept as tokens for API parity. */
  --elevation-0: none;
  --elevation-1: none;
}