/**
 * Testflight site — design tokens
 * Headlines: Space Grotesk (96px → 24px, xxxl → xs)
 * Body: Fira Mono (36px → 14px, xxxl → xs); page default is --type-body-s (17px)
 */

:root {
  /* Color */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-orange: #ff7300;

  --color-canvas: var(--color-black);
  --color-text-default: var(--color-white);
  --color-text-muted: rgb(255 255 255 / 0.5);
  --color-text-accent: var(--color-orange);

  /* Font families */
  --font-family-headline: "Space Grotesk", system-ui, sans-serif;
  --font-family-body: "Fira Mono", ui-monospace, monospace;

  --font-weight-headline: 700;
  --font-weight-body: 400;

  /* Headline scale (Space Grotesk): 96 → 24, 7 steps */
  --type-headline-xxxl: 96px;
  --type-headline-xxl: 84px;
  --type-headline-xl: 72px;
  --type-headline-l: 60px;
  --type-headline-m: 48px;
  --type-headline-s: 36px;
  --type-headline-xs: 24px;

  --type-headline-leading: 1.08;

  /* Body scale (Fira Mono): 36 → 14, 7 steps */
  --type-body-xxxl: 36px;
  --type-body-xxl: 32px;
  --type-body-xl: 28px;
  --type-body-l: 24px;
  --type-body-m: 20px;
  --type-body-s: 17px;
  --type-body-xs: 14px;

  --type-body-leading: 1.5;

  /* Button — default size (Figma node 20:70, 8pt grid) */
  --btn-padding-block: 16px;
  --btn-padding-inline: 16px;
  --btn-font-size: var(--type-body-xxl);
  --btn-group-gap: 24px;
  --btn-minor-border: 1px solid rgb(255 255 255 / 0.4);

  /* Compact CTA — mobile hero / Figma home-mobie load panel */
  --btn-compact-padding-block: 8px;
  --btn-compact-padding-inline: 10px;
  --btn-compact-font-size: 12px;
  --btn-compact-min-height: 32px;
  --btn-accent-radius: 2px;
}

/* Page defaults: black canvas, white text */
html {
  background-color: var(--color-canvas);
  color: var(--color-text-default);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-canvas);
  color: var(--color-text-default);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  /* Default prose: one size site-wide; use utilities for larger emphasis */
  font-size: var(--type-body-s);
  line-height: var(--type-body-leading);
}

/* Typography utilities (optional; prefix avoids clashes) */
.tf-headline {
  font-family: var(--font-family-headline);
  font-weight: var(--font-weight-headline);
  line-height: var(--type-headline-leading);
  margin: 0;
}

.tf-headline--xxxl {
  font-size: var(--type-headline-xxxl);
}
.tf-headline--xxl {
  font-size: var(--type-headline-xxl);
}
.tf-headline--xl {
  font-size: var(--type-headline-xl);
}
.tf-headline--l {
  font-size: var(--type-headline-l);
}
.tf-headline--m {
  font-size: var(--type-headline-m);
}
.tf-headline--s {
  font-size: var(--type-headline-s);
}
.tf-headline--xs {
  font-size: var(--type-headline-xs);
}

.tf-body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--type-body-leading);
  margin: 0;
}

.tf-body--xxxl {
  font-size: var(--type-body-xxxl);
}
.tf-body--xxl {
  font-size: var(--type-body-xxl);
}
.tf-body--xl {
  font-size: var(--type-body-xl);
}
.tf-body--l {
  font-size: var(--type-body-l);
}
.tf-body--m {
  font-size: var(--type-body-m);
}
.tf-body--s {
  font-size: var(--type-body-s);
}
.tf-body--xs {
  font-size: var(--type-body-xs);
}

.tf-text-accent {
  color: var(--color-text-accent);
}

.tf-text-muted {
  color: var(--color-text-muted);
}

/* Scrollbars — brand orange (Firefox + WebKit) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-orange) rgb(255 255 255 / 0.1);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 0.08);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #ff8f40;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}