/* ============================================================
   BTC Now — Foundations
   Colors + Typography tokens, plus semantic element styles.
   Pulled from BTC-Now/Website (src/style.css) and
   BTC-Now/Waitlist-website (css/styles.css).
   ============================================================ */

/* --- Fonts ---
   Primary (product UI + body): Inter — Google Fonts
   Display (marketing headlines): Clash Display — Fontshare
   Mono (numerics, IDs): JetBrains Mono — Google Fonts (substituted
   for the codebase's default `monospace` stack; flagged in README)
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@300,400,500,600,700&display=swap');

:root {
  /* =========================================================
     COLORS — Core
     ========================================================= */

  /* Surfaces */
  --bg-core:        #000000;  /* Waitlist / hero void */
  --bg-color:       #050507;  /* Product background */
  --bg-surface-1:   #0A0A0A;  /* Modal cards, waitlist modal */
  --bg-surface-2:   #0D0D12;  /* Calculator card (uni-card) */
  --bg-surface-3:   #14141A;  /* Comp cards, elevated panels */

  /* Ambient / radial gradient background */
  --bg-gradient: radial-gradient(circle at 50% 0%, #1A1A2E 0%, #050507 60%);

  /* =========================================================
     COLORS — Brand Orange (Bitcoin-derived)
     Molten Gold gradient is the flagship signature.
     ========================================================= */
  --bitcoin:          #F7931A;  /* Canonical Bitcoin orange (used as accent in waitlist, icons) */
  --orange-500:       #FF9F0A;  /* Primary (product) */
  --orange-400:       #FFB84D;  /* Light (law-text top) */
  --orange-300:       #FFD60A;  /* Sunrise (gradient top) */
  --orange-700:       #8B5200;  /* Deep (law-text bottom) */
  --orange-red:       #FF453A;  /* Molten ember (gradient end) */

  --primary-color:    var(--orange-500);
  --primary-gradient: linear-gradient(135deg, #FFD60A 0%, #FF9F0A 50%, #FF453A 100%);
  --primary-glow:     0 0 30px rgba(255, 159, 10, 0.3);
  --accent:           var(--bitcoin);
  --accent-glow:      rgba(247, 147, 26, 0.4);

  /* =========================================================
     COLORS — Text
     ========================================================= */
  --text-color:     #F5F5F7;  /* Primary foreground */
  --text-muted:     #86868B;  /* Labels, secondary copy */
  --text-mid:       #666666;  /* Waitlist mid-tone */
  --text-dim:       #222222;  /* Statement dim (pre-scroll reveal) */
  --text-faint:     #444444;  /* Tagline / micro-copy */
  --text-inverse:   #000000;  /* On-primary (buttons) */

  /* =========================================================
     COLORS — Semantic
     ========================================================= */
  --success:        #10B981;  /* Live indicator, positive trend, KYC done */
  --success-alt:    #30D158;  /* DCA "flat" price line */
  --warning:        #F59E0B;  /* Hard credit check pending */
  --danger:         #EF4444;  /* Remove, deficit */
  --danger-alt:     #FF453A;  /* Price increase (bad) in DCA */
  --info:           #3B82F6;  /* Avatar alt */

  /* Tints for backgrounds */
  --success-bg:     rgba(16, 185, 129, 0.1);
  --warning-bg:     rgba(245, 158, 11, 0.1);
  --danger-bg:      rgba(239, 68, 68, 0.1);
  --orange-bg:      rgba(255, 159, 10, 0.1);
  --orange-bg-soft: rgba(255, 159, 10, 0.03);

  /* =========================================================
     GLASSMORPHISM
     ========================================================= */
  --glass-bg:       rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.06);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-border-top: rgba(255, 255, 255, 0.15);
  --glass-shadow:   0 8px 32px 0 rgba(0, 0, 0, 0.5);
  --glass-blur:     blur(20px);

  /* =========================================================
     SHADOWS & GLOWS
     ========================================================= */
  --shadow-sm:      0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-md:      0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-xl:      0 30px 80px rgba(0, 0, 0, 0.9);
  --shadow-primary: 0 0 20px rgba(247, 147, 26, 0.3);
  --shadow-primary-hover: 0 0 40px rgba(247, 147, 26, 0.6);

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      16px;
  --radius-lg:      24px;
  --radius-xl:      32px;
  --radius-pill:    100px;   /* Buttons, chips, badges */
  --radius-circle:  50%;

  /* =========================================================
     SPACING (rem scale, used ad-hoc across codebase)
     ========================================================= */
  --space-0:        0;
  --space-1:        0.25rem;  /*  4px */
  --space-2:        0.5rem;   /*  8px */
  --space-3:        0.75rem;  /* 12px */
  --space-4:        1rem;     /* 16px */
  --space-5:        1.5rem;   /* 24px */
  --space-6:        2rem;     /* 32px */
  --space-7:        2.5rem;   /* 40px */
  --space-8:        3rem;     /* 48px */
  --space-10:       4rem;     /* 64px */
  --space-12:       6rem;     /* 96px */

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  0.2s;
  --duration-base:  0.3s;
  --duration-slow:  0.4s;
  --duration-reveal: 1s;
  --transition:     all 0.3s var(--ease-out-expo);

  /* =========================================================
     TYPOGRAPHY — Families
     ========================================================= */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPOGRAPHY — Type Scale
     Product UI (Inter, tight) scale.
     ========================================================= */
  --text-xs:      0.75rem;    /* 12 — micro labels */
  --text-sm:      0.85rem;    /* 13.6 — small labels */
  --text-base:    0.9rem;     /* 14.4 — body default in product */
  --text-body:    1rem;       /* 16 — body large / buttons */
  --text-md:      1.1rem;     /* 17.6 — list items, token names */
  --text-lg:      1.2rem;     /* 19.2 — card titles */
  --text-xl:      1.25rem;    /* 20 — modal h2 */
  --text-2xl:     1.5rem;     /* 24 — logo */
  --text-3xl:     2rem;       /* 32 — dashboard H1 (Overview) */
  --text-4xl:     2.5rem;     /* 40 — section h2 */
  --text-5xl:     3.5rem;     /* 56 — portfolio value */
  --text-hero:    5rem;       /* 80 — marketing H1 */

  /* Waitlist / marketing (Clash Display, fluid) */
  --text-statement: clamp(3rem, 7vw, 7rem);      /* Hero statements */
  --text-whisper:   clamp(2rem, 4.5vw, 4.5rem);  /* "Stop the chase." */
  --text-law:       clamp(2.5rem, 5.5vw, 5.5rem);/* The Three Laws */
  --text-ticker:    clamp(4rem, 12vw, 15rem);    /* Massive ticker */

  /* =========================================================
     TYPOGRAPHY — Weights
     ========================================================= */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* =========================================================
     TYPOGRAPHY — Letter-spacing
     Tight headlines are a signature.
     ========================================================= */
  --tracking-tighter: -0.05em;  /* Hero statements, ticker */
  --tracking-tight:   -0.03em;  /* H1 */
  --tracking-snug:    -0.02em;  /* Portfolio value */
  --tracking-base:    -0.01em;  /* Sub-copy */
  --tracking-normal:   0;
  --tracking-wide:    0.05em;   /* Eyebrow labels */
  --tracking-widest:  0.2em;    /* Ticker-sub uppercase */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-xl:  1400px;
  --container-lg:  1200px;
  --sidebar-w:     260px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Opt-in via .btc class on <body>, or import into product.
   ========================================================= */

.btc, .btc * { box-sizing: border-box; }

.btc {
  font-family: var(--font-sans);
  background: var(--bg-color);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Display (marketing) --- */
.btc .display-hero,
.btc .statement {
  font-family: var(--font-display);
  font-size: var(--text-statement);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  text-align: center;
}

.btc .whisper {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-whisper);
  letter-spacing: var(--tracking-snug);
}

/* --- Product headings (Inter) --- */
.btc h1 {
  font-size: var(--text-hero);
  font-weight: var(--weight-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: #fff;
}

.btc h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: #fff;
}

.btc h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #fff;
}

.btc p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-color);
}

.btc .eyebrow,
.btc .label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.btc code,
.btc .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--primary-color);
}

/* --- Metallic gradient text (marketing signature) --- */
.btc .grad-text {
  background: radial-gradient(ellipse 150% 45% at 50% 50%,
    #FFFFFF 0%, #777777 45%, #222222 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btc .law-text {
  background: radial-gradient(ellipse 150% 45% at 50% 50%,
    var(--orange-400) 0%, var(--bitcoin) 35%, var(--orange-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 80px var(--accent-glow));
}

.btc .static-grad {
  background: linear-gradient(180deg, #FFFFFF 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}