/* ============================================================
   BTCNIZANDO — Foundations
   Tokens de cor e tipografia. Importado por portal.css.
   ============================================================ */

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

:root {
  /* ───────── BRAND CORE ───────── */
  --btc-yellow:        #FCD535;
  --btc-yellow-deep:   #F0BB1F;
  --btc-yellow-soft:   #FFF1B0;
  --btc-orange:        #F7931A;
  --btc-orange-deep:   #D97706;

  /* ───────── INK ───────── */
  --ink-1000:          #0A0A0A;
  --ink-900:           #141414;
  --ink-800:           #1F1F1F;
  --ink-700:           #2A2A2A;
  --ink-500:           #6B6B6B;
  --ink-400:           #9A9A9A;
  --ink-300:           #C9C9C9;
  --ink-200:           #E5E5E5;
  --ink-100:           #F4F4F4;
  --ink-50:            #FAFAFA;
  --white:             #FFFFFF;

  /* ───────── SEMANTIC ───────── */
  --up:                #16A34A;
  --up-soft:           #DCFCE7;
  --down:              #DC2626;
  --down-soft:         #FEE2E2;
  --info:              #2563EB;
  --warn:              #F59E0B;

  /* ───────── ALIASES ───────── */
  --fg-1:              var(--ink-1000);
  --fg-2:              var(--ink-700);
  --fg-3:              var(--ink-500);
  --fg-on-yellow:      var(--ink-1000);
  --fg-on-black:       var(--white);
  --fg-link:           var(--ink-1000);
  --fg-link-hover:     var(--btc-orange-deep);

  --bg-canvas:         var(--white);
  --bg-tint:           var(--ink-100);
  --bg-card:           var(--white);
  --bg-inverse:        var(--ink-1000);
  --bg-brand:          var(--btc-yellow);
  --bg-brand-deep:     var(--ink-1000);

  --border:            var(--ink-200);
  --border-strong:     var(--ink-1000);
  --hairline:          rgba(0,0,0,0.08);

  /* ───────── FONTES ───────── */
  --font-display:      "Anton", "Impact", system-ui, sans-serif;
  --font-heading:      "Inter", system-ui, -apple-system, sans-serif;
  --font-body:         "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, monospace;

  /* ───────── ESCALA TIPOGRÁFICA ───────── */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-48: 3rem;
  --t-56: 3.5rem;
  --t-72: 4.5rem;

  /* ───────── ESPAÇAMENTO ───────── */
  --s-2:  2px; --s-4:  4px; --s-8:  8px; --s-12: 12px;
  --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px;
  --s-40: 40px; --s-56: 56px; --s-80: 80px;

  /* ───────── RADII ───────── */
  --r-0: 0px; --r-4: 4px; --r-8: 8px; --r-12: 12px;
  --r-16: 16px; --r-24: 24px; --r-pill: 999px;

  /* ───────── SOMBRAS ───────── */
  --shadow-card:   0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-pop:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-strong: 0 12px 32px rgba(0,0,0,0.20);
  --shadow-yellow: 0 8px 24px rgba(252,213,53,0.45);
  --shadow-inset:  inset 0 -2px 0 rgba(0,0,0,0.06);

  /* ───────── MOTION ───────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ───────── CLASSES DE TIPOGRAFIA ───────── */
.t-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-12); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.t-category { font-family: var(--font-heading); font-weight: 800; font-size: var(--t-12); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-1000); }
.t-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; color: var(--fg-1); }
.t-h1 { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-1); text-wrap: balance; }
.t-h2 { font-family: var(--font-heading); font-weight: 800; font-size: var(--t-32); line-height: 1.1; letter-spacing: -0.015em; color: var(--fg-1); }
.t-h3 { font-family: var(--font-heading); font-weight: 800; font-size: var(--t-24); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-1); }
.t-h4 { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-20); line-height: 1.25; color: var(--fg-1); }
.t-lede { font-family: var(--font-body); font-weight: 500; font-size: var(--t-20); line-height: 1.45; color: var(--fg-2); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--t-16); line-height: 1.6; color: var(--fg-1); }
.t-small { font-family: var(--font-body); font-weight: 400; font-size: var(--t-14); line-height: 1.5; color: var(--fg-2); }
.t-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--t-12); line-height: 1.4; color: var(--fg-3); }
.t-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }