/* =============================================================
   FitHub / Fitbud — Colors + Typography
   Sourced from constants/Colors.ts and constants/Typography.ts
   Dark theme is primary (app defaults to dark).
   ============================================================= */

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

:root {
  /* ── Brand accents ─────────────────────────────────────── */
  --neon-green:        #00E676;   /* primary brand accent */
  --neon-green-dark:   #00C853;   /* light-theme primary */
  --neon-green-deep:   #009E50;   /* CTA gradient tail */
  --neon-yellow:       #FFEB3B;   /* calendar accent */
  --shine:             #12EF85;   /* CTA shimmer mid-stop */

  /* ── Dark (default) tokens ─────────────────────────────── */
  --background:          #050805;
  --foreground:          #F8FAFC;
  --card:                #101510;
  --card-foreground:     #F8FAFC;
  --elevated:            #151A15;
  --primary:             var(--neon-green);
  --primary-foreground:  #000000;
  --secondary:           #151D16;
  --secondary-foreground:#D8E7DC;
  --muted:               #182018;
  --muted-foreground:    #94A3B8;
  --accent:              var(--neon-green);
  --accent-foreground:   #000000;
  --destructive:         #EF4444;
  --destructive-foreground: #FFFFFF;
  --border:              #263026;
  --input:               #151D16;
  --input-border:        rgba(0, 230, 118, 0.30);
  --ring:                var(--neon-green);
  --success:             var(--neon-green);
  --warning:             var(--neon-yellow);
  --info:                #22D3EE;
  --overlay:             rgba(0,0,0,0.62);
  --glass:               rgba(12,18,12,0.78);
  --soft-shadow:         rgba(0,230,118,0.18);

  /* ── Semantic overlays ────────────────────────────────── */
  --hairline: rgba(255,255,255,0.06);
  --pill-bg:  rgba(0,0,0,0.48);
  --pill-border: rgba(0,230,118,0.22);

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-num:  'Montserrat', -apple-system, 'SF Pro Display', sans-serif; /* tabular */

  /* ── Radii ─ FitHub uses SMALL radii (6–13px) ────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;      /* default card */
  --radius-md: 8px;      /* tier card, modal */
  --radius-lg: 13px;     /* inputs */
  --radius-xl: 18px;     /* primary CTA */
  --radius-pill: 999px;

  /* ── Elevation ─ tinted with primary ─────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 4px 10px rgba(0,0,0,0.5);
  --shadow-md: 0 12px 24px rgba(0,0,0,0.55), 0 0 0 1px var(--hairline);
  --shadow-glow: 0 12px 24px rgba(0,230,118,0.28);
  --shadow-glow-strong: 0 16px 48px rgba(0,230,118,0.45);

  /* ── Spacing (4pt grid) ─────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* ── Light-theme overrides (secondary) ─────────────────── */
[data-theme="light"] {
  --background:          #F7FAF8;
  --foreground:          #0F172A;
  --card:                #FFFFFF;
  --card-foreground:     #0F172A;
  --elevated:            #FFFFFF;
  --primary:             var(--neon-green-dark);
  --primary-foreground:  #000000;
  --secondary:           #EEF7F1;
  --secondary-foreground:#475569;
  --muted:               #EAF2ED;
  --muted-foreground:    #64748B;
  --accent:              #E8F5E9;
  --accent-foreground:   #0F172A;
  --border:              #DCE8E0;
  --input-border:        rgba(0, 200, 83, 0.40);
  --ring:                var(--neon-green-dark);
  --overlay:             rgba(0,0,0,0.55);
  --glass:               rgba(255,255,255,0.78);
  --soft-shadow:         rgba(15,23,42,0.12);
  --hairline:            rgba(0,0,0,0.06);
}

/* =============================================================
   Base + type scale (iOS app scale, slightly amplified for web)
   ============================================================= */
html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Display — used on hero titles, auth screens, premium */
.display-xl { font-size: 40px; line-height: 44px; font-weight: 900; letter-spacing: -0.6px; }
.display-lg { font-size: 34px; line-height: 40px; font-weight: 900; letter-spacing: -0.5px; }  /* Premium hero */
.display    { font-size: 30px; line-height: 36px; font-weight: 900; letter-spacing: -0.4px; }  /* SignIn hero */

/* Headings */
h1, .h1 { font-size: 26px; line-height: 32px; font-weight: 900; letter-spacing: -0.4px; }      /* "Welcome back" */
h2, .h2 { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.3px; }      /* Section titles, tier name */
h3, .h3 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.2px; }
h4, .h4 { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.1px; }

/* Body */
p,  .body   { font-size: 15px; line-height: 22px; font-weight: 400; }
.body-sm    { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-xs    { font-size: 13px; line-height: 18px; font-weight: 500; }
.caption    { font-size: 11px; line-height: 15px; font-weight: 600; color: var(--muted-foreground); }
.micro      { font-size: 10px; line-height: 14px; font-weight: 600; }

/* Eyebrow — uppercase, letter-spaced, primary colored */
.eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
}

/* Data/number style */
.num { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.3px; }