/* ═══════════════════════════════════════════════════════════════════════════
 * tokens.css — CryptoTaxEdge main-site design tokens
 * ═══════════════════════════════════════════════════════════════════════════
 * Mirrors the cte-app premium token system (4-tier elevation, 6-step type
 * scale, 150/250/400ms motion curves, spacing scale). Brand colors stay
 * aligned with the legacy marketing palette (navy3 #0e1340 + teal #00c9b1).
 *
 * Usage from index.html: <link rel="stylesheet" href="/styles/tokens.css">
 * Every declaration in index.html <style> should reference these tokens
 * so the system compounds rather than drifting per-surface.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand color (legacy marketing palette, already on-brand) ── */
  --navy:        #1a2366;
  --navy2:       #141b55;
  --navy3:       #0e1340;
  --teal:        #00c9b1;
  --teal2:       #00e5ca;
  --cyan:        #3dd8f0;
  --white:       #ffffff;
  --off:         #e8eeff;
  --muted:       #8892c4;
  --card:        #1e2870;
  --card2:       #232d80;
  --border:      rgba(0, 201, 177, 0.15);
  --border2:     rgba(255, 255, 255, 0.08);
  --border3:     rgba(255, 255, 255, 0.16);
  --glow:        rgba(0, 201, 177, 0.25);
  --glow-strong: rgba(0, 201, 177, 0.45);

  /* ── Status colors ── */
  --c-success:   #4ade80;
  --c-warn:      #fbbf24;
  --c-danger:    #f87171;
  --c-upgrade:   #60a5fa;
  --c-pro:       #a78bfa;

  /* ── Elevation (4-tier — inset-line + shadow ladder) ── */
  --el-1: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
  --el-2: 0 1px 2px rgba(0, 0, 0, 0.4),
          0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --el-3: 0 8px 24px -8px rgba(0, 0, 0, 0.6),
          0 1px 2px rgba(0, 0, 0, 0.5),
          0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --el-4: 0 24px 64px -16px rgba(0, 0, 0, 0.7),
          0 2px 8px rgba(0, 0, 0, 0.5),
          0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --el-glow: 0 0 0 1px rgba(0, 201, 177, 0.18),
             0 8px 32px rgba(0, 201, 177, 0.18);

  /* ── Motion curves ── */
  --m-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --m-med:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --m-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Type scale (intentional 6-step) ── */
  --t-xs:     11px;
  --t-sm:     13px;
  --t-base:   15px;
  --t-lg:     17px;
  --t-xl:     24px;
  --t-2xl:    36px;

  --t-xs-lh:     16px;
  --t-sm-lh:     20px;
  --t-base-lh:   22px;
  --t-lg-lh:     26px;
  --t-xl-lh:     32px;
  --t-2xl-lh:    44px;

  /* ── Spacing scale ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Radii ── */
  --r-sm:   6px;
  --r:      10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 100px;

  /* ── Font stacks ── */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Layout ── */
  --maxw-narrow: 900px;
  --maxw:        1100px;
  --maxw-wide:   1280px;
}

/* ── Focus-visible (accessibility baseline) ── */
*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Reduced-motion fallback ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}