/* FaseZero · Type tokens + semantic type classes
   Generated from the FaseZero Brand Book. Do not hardcode hex in components; use these vars. */

:root {
  /* TYPOGRAPHY
     ======================================================================== */

  /* Font families — Mulish is the SOLE FaseZero typeface.                   */
  --font-display: "Mulish", system-ui, sans-serif;
  --font-sans:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label:   "Mulish", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — matched EXACTLY to FaseZero brand book section 06.          */
  --fs-display-xl: 96px;   /* hero — reserved                                */
  --fs-display-lg: 80px;
  --fs-display:    68px;   /* brand book DISPLAY · 68 / 800                 */
  --fs-h1:         44px;   /* brand book H1 · 44 / 800                       */
  --fs-h2:         28px;   /* brand book H2 · 28 / 700                       */
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;   /* brand book BODY · 16 / 400                     */
  --fs-body-sm:    14px;
  --fs-caption:    12px;   /* brand book CAPTION · 12 / 400                  */
  --fs-micro:      10px;   /* product mini-label only — brand prefers 12px  */

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.2;  /* @kind font */
  --lh-normal:  1.45; /* @kind font */
  --lh-relaxed: 1.6;  /* @kind font */

  /* Letter spacing — brand book: -2% display/headings, normal body, +8% eyebrow */
  --tracking-tight:   -0.02em;   /* @kind font */
  --tracking-snug:    -0.01em;   /* @kind font */
  --tracking-normal:  0;          /* @kind font */
  --tracking-body:    0;          /* @kind font */
  --tracking-wide:    0.04em;     /* @kind font */
  --tracking-eyebrow: 0.08em;     /* @kind font */
  --tracking-allcaps: 0.08em;     /* @kind font */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */
}

/* ============================================================================
   SEMANTIC TYPE CLASSES
   Use these on real elements: .h1, .body, .caption, etc.
   ============================================================================ */

/* Mulish for everything. The system relies on weight + size + tracking, not  */
/* on font-family swaps. Display uses 800 (ExtraBold) or 900 (Black).         */
.display-xl, .display-lg, .display {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
}
.h1, .h2, .h3, .h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}

.display-xl { font-size: var(--fs-display-xl); line-height: 1.0;  letter-spacing: var(--tracking-tight); font-weight: 900; }
.display-lg { font-size: var(--fs-display-lg); line-height: 1.0;  letter-spacing: var(--tracking-tight); font-weight: 800; }
.display    { font-size: var(--fs-display);    line-height: 1.05; letter-spacing: var(--tracking-tight); font-weight: 800; }
.display-md { font-size: var(--fs-display);    line-height: 1.05; letter-spacing: var(--tracking-tight); font-weight: 800; }  /* alias */

.h1 { font-size: var(--fs-h1); line-height: 1.1;  letter-spacing: var(--tracking-tight); font-weight: 800; }
.h2 { font-size: var(--fs-h2); line-height: 1.2;  letter-spacing: var(--tracking-tight); font-weight: 700; }
.h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: var(--tracking-snug); font-weight: 700; }
.h4 { font-size: var(--fs-h4); line-height: 1.4;  letter-spacing: 0;                    font-weight: 700; }

.body-lg,
.body,
.body-sm,
.caption,
.micro,
p {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}

.body-lg  { font-size: var(--fs-body-lg); line-height: 1.5; font-weight: var(--fw-regular); }
.body, p  { font-size: var(--fs-body);    line-height: 1.5; font-weight: var(--fw-regular); }
.body-sm  { font-size: var(--fs-body-sm); line-height: 1.5; font-weight: var(--fw-regular); }
.caption  { font-size: var(--fs-caption); line-height: 1.4; font-weight: var(--fw-regular); color: var(--fg-3); }
.micro    { font-family: var(--font-label); font-size: var(--fs-micro); line-height: var(--lh-normal); font-weight: var(--fw-bold); color: var(--brand-mid); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }

.code, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  border-radius: var(--radius-xs);
  padding: 0.12em 0.36em;
  color: var(--fg-1);
}

/* Eyebrow — brand book: 12 / 700 / +8% tracked / uppercase                   */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand-mid);
}

/* Status pill label — Mulish Bold 12px ALL CAPS                              */
.status-label {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

/* Base */
html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}