/* ============================================================
   RUNHEX — Colors & Type tokens
   Source of truth: RUNHEX iOS app (lib/theme.dart, accent_notifier.dart)
   and the marketing site (css/style.css). Dark canvas + Aqua accent.
   Fonts: Barlow Condensed (display/labels) + DM Sans (body),
   both served from Google Fonts CDN.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Brand headline face — uploaded by the user (self-hosted). All-caps,
   condensed, athletic. Used for the wordmark, hero, and section headings. */
@font-face {
  font-family: 'American Captain';
  src: url('fonts/AmericanCaptain-MdEY.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Surfaces / canvas ---------- */
  --bg:         #0e0f10;   /* app + site canvas, near-black */
  --surface:    #161618;   /* cards */
  --surface-2:  #1c1c22;   /* raised tiles, inputs */
  --surface-3:  #232329;   /* hover / nested tiles */

  /* ---------- Hairline borders ---------- */
  --border:     rgba(255, 255, 255, 0.08);
  --border-2:   rgba(255, 255, 255, 0.14);
  --border-3:   rgba(255, 255, 255, 0.22);

  /* ---------- Text ---------- */
  --text:       #eaeaf0;                      /* primary */
  --text-mute:  rgba(234, 234, 240, 0.55);    /* secondary */
  --text-dim:   rgba(234, 234, 240, 0.40);    /* tertiary */
  --text-faint: rgba(234, 234, 240, 0.25);    /* quaternary / disabled */
  --text-white: #ffffff;                      /* emphasis inside body */

  /* ---------- Brand — Aqua (AccentNotifier default) ---------- */
  --brand:      #00ffb2;
  --brand-dim:  #00b27d;
  --brand-soft: rgba(0, 255, 178, 0.10);      /* tinted fills */
  --brand-line: rgba(0, 255, 178, 0.18);      /* tinted borders */
  --brand-glow: rgba(0, 255, 178, 0.32);      /* shadows / blooms */
  --brand-on:   #0e0f10;                       /* text/icon on brand fill */

  /* ---------- Accent (secondary) — Streak Flame ---------- */
  --flame:      #ff6a2b;
  --flame-glow: rgba(255, 106, 43, 0.35);

  /* ---------- Tier colors — exact app values (GamifitColors) ---------- */
  --tier-iron:     #bb9393;
  --tier-bronze:   #a26325;
  --tier-silver:   #e4e3e3;
  --tier-gold:     #fad70f;
  --tier-platinum: #aae1f0;
  --tier-kilo:     #fc5b3f;
  --tier-mega:     #cf76f9;
  --tier-giga:     #7892fd;
  --tier-tera:     #90fea7;

  /* ---------- Fonts ---------- */
  --font-brand:   'American Captain', 'Barlow Condensed', sans-serif; /* wordmark, hero, section headings — ALL CAPS */
  --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif; /* labels, nav, buttons, numerals */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type scale (display = Barlow Condensed) ---------- */
  --fs-hero:    72px;  /* hero h1 (desktop) */
  --fs-h1:      40px;  /* section heading */
  --fs-h2:      36px;  /* legal h1 / sub-hero */
  --fs-h3:      18px;  /* card title */
  --fs-lede:    18px;  /* hero supporting paragraph */
  --fs-body:    15px;  /* default body */
  --fs-small:   14px;
  --fs-label:   13px;  /* eyebrows, section kickers */
  --fs-micro:   12px;  /* nav, footer labels */

  /* line-height */
  --lh-tight:   1.0;
  --lh-snug:    1.2;
  --lh-body:    1.65;

  /* tracking — Barlow Condensed is set wide & UPPERCASE for labels */
  --ls-hero:    -0.5px;
  --ls-label:   2.4px;
  --ls-nav:     1.6px;
  --ls-wordmark: 3px;

  /* ---------- Radii ---------- */
  --r-sm:   10px;   /* inputs, small tiles */
  --r-md:   14px;   /* buttons */
  --r-lg:   18px;   /* cards */
  --r-xl:   24px;   /* large panels */
  --r-2xl:  32px;   /* phone frame */
  --r-pill: 999px;  /* chips, eyebrows */

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-card:  0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 30px rgba(0,0,0,0.45);
  --shadow-pop:   0 16px 50px rgba(0,0,0,0.55);
  --glow-brand:   0 6px 28px var(--brand-glow);
  --glow-brand-lg:0 10px 40px var(--brand-glow);

  /* ---------- Glass / morphism ---------- */
  --glass-bg:     rgba(22, 22, 24, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur:   blur(18px) saturate(160%);
}

/* ============================================================
   Semantic type classes
   ============================================================ */

.display-font { font-family: var(--font-display); font-weight: 800; }

/* Brand headline face — American Captain. Inherently all-caps. */
.t-brand {
  font-family: var(--font-brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
}

.t-hero {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 86px;
  line-height: 0.92;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
}
.t-h1 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 48px;
  line-height: 0.98;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: 0.3px;
  color: var(--text);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: 0.3px;
  color: var(--text);
}
/* Eyebrow / section kicker — uppercase, wide-tracked, brand-colored */
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand);
}
.t-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--text-mute);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.t-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-mute);
}
.t-num {
  /* big stat numbers use the display face */
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}