/* ════════════════════════════════════════════════════════════════════════════
   MAIN.CSS - Design System Tokens + Base Styles
   LeverageBuilder.com - Digital Asset Operating System
   Dark premium UI. Purple/violet accents. Editorial typography.
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {

  /* ── Deep space backgrounds ─────────────────────────────────────────────── */
  --lb-black:         #05050a;
  --lb-black-soft:    #0b0b14;
  --lb-panel:         #11111f;
  --lb-panel-raised:  #161628;
  --lb-panel-hover:   #1a1a30;

  /* ── Purple spectrum ────────────────────────────────────────────────────── */
  --lb-purple:        #7c3cff;
  --lb-violet:        #a855f7;
  --lb-electric:      #c084fc;
  --lb-pale:          #ddb6ff;
  --lb-purple-dark:   #5a28cc;

  /* ── Borders with purple tint ───────────────────────────────────────────── */
  --lb-border:        rgba(170, 92, 255, 0.12);
  --lb-border-mid:    rgba(170, 92, 255, 0.22);
  --lb-border-glow:   rgba(168, 85, 247, 0.40);
  --lb-border-subtle: rgba(255, 255, 255, 0.05);

  /* ── Text on dark ───────────────────────────────────────────────────────── */
  --lb-text:          #f0eeff;
  --lb-text-muted:    #a09cc0;
  --lb-text-faint:    #6b6080;
  --lb-text-ghost:    #3d3850;

  /* ── Glows ──────────────────────────────────────────────────────────────── */
  --lb-glow-purple:   rgba(124, 60, 255, 0.15);
  --lb-glow-violet:   rgba(168, 85, 247, 0.12);
  --lb-glow-electric: rgba(192, 132, 252, 0.08);

  /* ── Status colors ──────────────────────────────────────────────────────── */
  --lb-green:         #34d399;
  --lb-green-dim:     rgba(52, 211, 153, 0.12);
  --lb-amber:         #fbbf24;
  --lb-amber-dim:     rgba(251, 191, 36, 0.12);
  --lb-red:           #f87171;
  --lb-red-dim:       rgba(248, 113, 113, 0.12);

  /* ── Backward-compatible aliases ────────────────────────────────────────── */
  --dark-bg:          var(--lb-black);
  --dark-surface:     var(--lb-panel);
  --dark-border:      var(--lb-border);
  --dark-text:        var(--lb-text);
  --dark-text-muted:  var(--lb-text-muted);
  --dark-text-faint:  var(--lb-text-faint);
  --color-bg:         var(--lb-black);
  --color-surface:    var(--lb-panel);
  --color-border:     var(--lb-border);
  --color-text-primary:   var(--lb-text);
  --color-text-secondary: var(--lb-text-muted);
  --color-accent:     var(--lb-violet);

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px */

  /* Font weights */
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.85;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.12em;

  /* Spacing scale */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);

  /* Layout */
  --max-width:     1220px;
  --header-height: 72px;
  --content-gap:   var(--space-8);
}

/* ── Base Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--lb-text-muted);
  background-color: var(--lb-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--lb-text);
}

h1 { font-size: var(--text-4xl);  font-weight: var(--weight-extralight); }
h2 { font-size: 2.0625rem;         font-weight: var(--weight-light); }
h3 { font-size: var(--text-2xl);  font-weight: var(--weight-regular); }
h4 { font-size: var(--text-xl);   font-weight: var(--weight-regular); }
h5 { font-size: var(--text-lg);   font-weight: var(--weight-regular); }
h6 { font-size: var(--text-base); font-weight: var(--weight-regular); }

/* ── Page header - unified across all content types ──────────────────────── */
.page-header {
  padding: var(--space-12) 0 var(--space-10);
  border-bottom: 1px solid var(--lb-border);
  margin-bottom: var(--space-10);
}

.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lb-violet);
  margin-bottom: var(--space-4);
  display: block;
}

.page-header__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: var(--weight-extralight);
  line-height: var(--leading-tight);
  color: var(--lb-text);
  max-width: 880px;
  margin-bottom: var(--space-4);
}

.page-header__lead {
  font-size: calc(var(--text-xl) * 1.5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--lb-text-muted);
  line-height: var(--leading-snug);
  max-width: 680px;
  margin-bottom: var(--space-6);
  border-left: 2px solid var(--lb-violet);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
}

@media (max-width: 768px) {
  .page-header__title { font-size: var(--text-3xl); }
  .page-header__lead  { font-size: var(--text-xl); }
}

p {
  font-family: var(--font-serif);
  color: var(--lb-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--lb-electric);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--lb-text); }

strong { font-weight: var(--weight-bold); color: var(--lb-text); }
em     { font-style: italic; }

ul, ol { padding-left: var(--space-5); color: var(--lb-text-muted); }
li     { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--lb-purple);
  border-color: var(--lb-purple);
  color: #fff;
}
.btn--primary:hover {
  background: var(--lb-violet);
  border-color: var(--lb-violet);
  color: #fff;
  box-shadow: 0 0 20px var(--lb-glow-purple);
}

.btn--secondary {
  background: transparent;
  border-color: var(--lb-border-mid);
  color: var(--lb-electric);
}
.btn--secondary:hover {
  border-color: var(--lb-violet);
  color: var(--lb-text);
  background: rgba(168, 85, 247, 0.06);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--lb-text-muted);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}
.btn--ghost:hover { color: var(--lb-text); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: 10px; }

/* ── Chips & Tags ─────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.chip--default {
  background: var(--lb-panel-raised);
  border: 1px solid var(--lb-border);
  color: var(--lb-text-muted);
}

.chip--violet {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: var(--lb-electric);
}

.chip--green {
  background: var(--lb-green-dim);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: var(--lb-green);
}

.chip--amber {
  background: var(--lb-amber-dim);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: var(--lb-amber);
}

.chip--muted {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--lb-border);
  color: var(--lb-text-faint);
}

/* ── Panels & Surfaces ────────────────────────────────────────────────────── */
.panel {
  background: var(--lb-panel);
  border: 1px solid var(--lb-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.panel--raised {
  background: var(--lb-panel-raised);
  border-color: var(--lb-border-mid);
}

.panel--glow {
  border-color: var(--lb-border-mid);
  box-shadow: 0 0 0 1px var(--lb-border), 0 0 40px var(--lb-glow-purple);
}

/* ── Section Labels ───────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lb-text-faint);
  margin-bottom: var(--space-3);
}

.section-label--violet { color: var(--lb-violet); }

/* ── Dividers ─────────────────────────────────────────────────────────────── */
hr, .divider {
  border: none;
  border-top: 1px solid var(--lb-border);
  margin: var(--space-8) 0;
}

/* ── CTA Block ────────────────────────────────────────────────────────────── */
.cta-block {
  background: var(--lb-panel);
  border: 1px solid var(--lb-border-mid);
  border-top: 2px solid var(--lb-violet);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  margin: var(--space-12) 0;
}

.cta-block__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lb-violet);
  margin-bottom: var(--space-3);
}

.cta-block__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extralight);
  letter-spacing: var(--tracking-tight);
  color: var(--lb-text);
  margin-bottom: var(--space-3);
}

.cta-block__body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--lb-text-muted);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-relaxed);
}

.cta-block__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-muted     { color: var(--lb-text-muted); }
.text-faint     { color: var(--lb-text-faint); }
.text-violet    { color: var(--lb-violet); }
.text-electric  { color: var(--lb-electric); }
.text-sm        { font-size: var(--text-sm); }
.text-xs        { font-size: var(--text-xs); font-family: var(--font-mono); }
.font-bold      { font-weight: var(--weight-bold); }
.uppercase      { text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-mono); }