/* ============================================================
   Build Empire — Design Tokens
   Single source of truth for colors, type, spacing, borders,
   radii, shadows. Zero hardcoded hex values elsewhere.
   ============================================================ */

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

:root {
  /* ─── BACKGROUNDS ────────────────────────────────────────── */
  --bg:           #080808;   /* ALL screen backgrounds */
  --surface:      #0E0E14;   /* Inputs, level-1 cards */
  --card:         #13131C;   /* Elevated cards, modals */

  /* ─── BORDERS ────────────────────────────────────────────── */
  --border:       rgba(255, 255, 255, 0.05);   /* Default — near invisible */
  --border-md:    rgba(255, 255, 255, 0.08);   /* Hover */
  --border-hi:    rgba(255, 255, 255, 0.12);   /* Interactive cards */
  --border-divider: rgba(255, 255, 255, 0.06); /* Section dividers */

  /* ─── PRIMARY ACCENT (EMERALD) ───────────────────────────── */
  --accent:       #064E3B;   /* Dark — hover bg, tints */
  --accent-2:     #047857;   /* PRIMARY CTA — buttons ONLY */
  --accent-3:     #10B981;   /* Glow, active tab dot, focus ring */

  /* ─── FIRE (STREAK / XP / ACHIEVEMENT) ───────────────────── */
  --fire:         #D97706;   /* Streak number, XP bar, stat numbers */
  --fire-2:       #B45309;   /* Streak bar fill, deep gold */

  /* ─── SEMANTIC ───────────────────────────────────────────── */
  --danger:       #B91C1C;   /* Quit penalty, decay, warnings */
  --purple:       #6D28D9;   /* Vault rewards screen ONLY */

  /* ─── TEXT ───────────────────────────────────────────────── */
  --text:         #F1F5F9;   /* ALL primary text */
  --muted:        #94A3B8;   /* ALL secondary/descriptive text */
  --subtle:       #475569;   /* Timestamps, hints, legal */

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --size-xs:   10px;
  --size-sm:   12px;
  --size-md:   14px;
  --size-lg:   16px;
  --size-xl:   20px;
  --size-xxl:  24px;
  --size-hero: 28px;
  --size-mega: 36px;

  /* Letter spacing presets */
  --track-mega:    -0.04em;   /* 36px+ hero */
  --track-heading: -0.03em;   /* 24–35px */
  --track-card:    -0.02em;   /* 18–23px */
  --track-body:    -0.01em;   /* 14–17px */
  --track-flat:     0em;      /* 12–13px */
  --track-btn:     0.06em;    /* uppercase buttons */
  --track-label:   0.12em;    /* DM Mono section labels */
  --track-step:    0.08em;    /* DM Mono step indicators */
  --track-tag:     0.06em;    /* DM Mono tags */
  --track-stat:    0.04em;    /* DM Mono stats/timestamps */

  /* Line heights */
  --leading-tight:    1.1;
  --leading-heading:  1.15;
  --leading-card:     1.2;
  --leading-body:     1.6;
  --leading-long:     1.7;
  --leading-flat:     1.0;

  /* ─── SPACING (base 4px · HIG-aligned) ────────────────────── */
  /*
   * Premium spacing rhythm for a goal-tracking / motivation app.
   * Rule: more whitespace = more premium. 20px for screens,
   * 16px inside cards, 8px between tight elements.
   * Touch targets: 44px minimum (Apple HIG).
   *
   * Scale:
   *   xs   4px  — icon-to-text gap
   *   sm   8px  — small gap (tight internal pairs)
   *   md  16px  — normal gap (between elements inside a card)
   *   lg  24px  — large section gap
   *   xl  32px  — huge section / hero gap
   *   mega 48px — top/bottom screen breathing room
   *
   * Layout anatomy:
   *   Screen horizontal padding  20px  (var(--screen-pad))
   *   Card internal padding      16px  (var(--card-pad))
   *   Gap between cards          16px  (var(--card-gap))
   *   Gap between card elements   8px  (var(--element-gap))
   *   Section gap                24px  (var(--space-lg))
   *   Hero section gap           32px  (var(--space-xl))
   *   Touch target minimum       44px  (var(--touch-min))
   */
  --space-xs:   4px;    /* Icon-to-text gap */
  --space-sm:   8px;    /* Small gap — tight internal pairs */
  --space-md:   16px;   /* Normal gap — between elements inside a card */
  --space-lg:   24px;   /* Large section gap */
  --space-xl:   32px;   /* Huge section / hero gap */
  --space-xxl:  48px;   /* Top/bottom screen breathing room */

  /* Layout fixed values */
  --screen-pad:   20px;  /* Horizontal screen padding — never tighter */
  --card-pad:     16px;  /* Card internal padding */
  --card-gap:     16px;  /* Gap between cards (normal gap) */
  --element-gap:   8px;  /* Tight gap between elements inside a card */
  --section-gap:  24px;  /* Between sections */
  --hero-gap:     32px;  /* Between major hero sections */
  --cta-height:   56px;  /* Primary CTA — always full-width, thumb zone */
  --input-height: 54px;
  --nav-height:   60px;  /* Bottom nav (+ safe area inset) */
  --touch-min:    44px;  /* Minimum touch target — Apple HIG */

  /* ─── RADIUS ─────────────────────────────────────────────── */
  --r-xs:   6px;     /* Tags, chips */
  --r-sm:   10px;    /* Inputs, task cards */
  --r-md:   14px;    /* Standard cards */
  --r-lg:   16px;    /* Large cards */
  --r-xl:   24px;    /* Modals, bottom sheets */
  --r-xxl:  32px;    /* Full-bleed cards */
  --r-full: 9999px;  /* Pills, avatars */

  /* ─── SHADOWS & GLOWS ────────────────────────────────────── */
  --shadow-cta:     0 4px 24px rgba(4, 120, 87, 0.25);   /* primary action */
  --shadow-empire:  0 0 40px rgba(4, 120, 87, 0.15);     /* active empire */
  --shadow-brick:   0 0 30px rgba(4, 120, 87, 0.4);      /* brick impact */
  --shadow-streak:  0 0 20px rgba(217, 119, 6, 0.3);     /* streak fire */
  --shadow-level:   0 0 60px rgba(16, 185, 129, 0.5);    /* level up */
  --shadow-vault:   0 0 40px rgba(109, 40, 217, 0.4);    /* rare reward */
  --shadow-danger:  0 0 20px rgba(185, 28, 28, 0.3);     /* warning */
  --shadow-fire-cta: 0 4px 24px rgba(217, 119, 6, 0.3);  /* fire button */

  /* Focus ring (input focused) */
  --focus-ring: 0 0 0 3px rgba(4, 120, 87, 0.12);

  /* ─── THE LINEAR BACKGROUND ──────────────────────────────── */
  --screen-bg-overlay:
    radial-gradient(ellipse at 50% -10%,
      rgba(255, 255, 255, 0.02) 0%,
      transparent 65%);
}

/* ============================================================
   Semantic helpers — apply these to any screen root
   ============================================================ */

.be-screen {
  background-color: var(--bg);
  background-image: var(--screen-bg-overlay);
  color: var(--text);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typography roles
   ============================================================ */

.be-hero {
  font-family: var(--font-primary);
  font-weight: var(--weight-black);
  font-size: var(--size-mega);
  letter-spacing: var(--track-mega);
  line-height: var(--leading-tight);
  color: var(--text);
}

.be-h1 {
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--size-xxl);
  letter-spacing: var(--track-heading);
  line-height: var(--leading-heading);
  color: var(--text);
}

.be-h2 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-xl);
  letter-spacing: var(--track-card);
  line-height: var(--leading-card);
  color: var(--text);
}

.be-body {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  letter-spacing: var(--track-body);
  line-height: var(--leading-body);
  color: var(--text);
}

.be-muted {
  color: var(--muted);
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  letter-spacing: var(--track-body);
  line-height: var(--leading-body);
}

.be-subtle {
  color: var(--subtle);
}

.be-btn-label {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--size-md);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  color: var(--text);
}

.be-section-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  line-height: var(--leading-flat);
}

.be-step {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--size-xs);
  letter-spacing: var(--track-step);
  text-transform: uppercase;
  color: var(--muted);
}

.be-tag {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--track-step);
  text-transform: uppercase;
  color: var(--muted);
}

.be-stat {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--size-sm);
  letter-spacing: var(--track-stat);
  color: var(--text);
}

/* ============================================================
   Buttons
   ============================================================ */

.be-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cta-height);
  border-radius: var(--r-sm);
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--size-md);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 80ms ease;
}
.be-btn:active { transform: scale(0.98); }

.be-btn-primary {
  background: var(--accent-2);
  color: var(--text);
  box-shadow: var(--shadow-cta);
}

.be-btn-fire {
  background: var(--fire);
  color: var(--bg);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-fire-cta);
}

.be-btn-ghost {
  background: transparent;
  border: 0.5px solid var(--border-hi);
  color: var(--muted);
  height: 48px;
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: var(--track-card);
}

.be-btn-danger {
  background: rgba(185, 28, 28, 0.1);
  border: 0.5px solid rgba(185, 28, 28, 0.3);
  color: var(--danger);
  height: 44px;
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: var(--track-card);
}