/* ============================================================
   UTXO — Shared design tokens (extends Vestige Index DS)
   Crypto-security mother brand. Wolf + shield. Sober, premium.
   ============================================================ */

:root {
  /* ── Brand primaries (blue→violet system) ──────────── */
  --brand-blue:        #2563EB;
  --brand-blue-vivid:  #246BFF;
  --brand-blue-soft:   #2DA8FF;
  --brand-blue-deep:   #1F6FFF;
  --brand-violet:      #6D28D9;
  --brand-violet-soft: #7B2CFF;
  --brand-violet-deep: #5B38F6;

  --brand-gradient:        linear-gradient(135deg, #2563EB 0%, #6D28D9 100%);
  --brand-gradient-vivid:  linear-gradient(135deg, #246BFF 0%, #7B2CFF 100%);
  --brand-gradient-mark:   linear-gradient(135deg, #2DA8FF 0%, #1F6FFF 48%, #5B38F6 100%);

  /* ── UTXO security accent — Bitcoin orange signature ── */
  --utxo-orange:      #F7931A;
  --utxo-orange-soft: #FFB44C;
  --utxo-orange-deep: #D97908;
  --utxo-amber-grad:  linear-gradient(135deg, #FFB44C 0%, #F7931A 50%, #D97908 100%);

  /* ── Off-white used inside marks ─────────────────────── */
  --mark-ink:    #0B0E14;   /* dark tile */
  --mark-tile:   #0F1320;   /* inner shield fill */
  --mark-light:  #EEF3FB;   /* wolf body */

  /* ── Foreground / background — light theme ─────────── */
  --fg-1:  #0A0B0D;
  --fg-2:  #374151;
  --fg-3:  #6B7280;
  --fg-4:  rgba(10,11,13,0.42);
  --fg-mono-dim: rgba(10,11,13,0.30);

  --bg-page:        #FFFFFF;
  --bg-page-warm:   #FAFAF9;
  --bg-card:        #FFFFFF;
  --bg-card-sub:    #F3F4F6;
  --bg-card-hover:  #F0F3FA;
  --bg-tint-blue:   rgba(37,99,235,0.06);
  --bg-tint-violet: rgba(109,40,217,0.05);
  --bg-tint-orange: rgba(247,147,26,0.08);
  --bg-glass:       rgba(255,255,255,0.72);
  --bg-glass-strong:rgba(255,255,255,0.90);

  --line:        rgba(10,11,13,0.08);
  --line-strong: rgba(10,11,13,0.12);
  --line-accent: rgba(37,99,235,0.18);

  --pos: #10B981;  --pos-soft: #34D399;
  --neg: #EF4444;  --warn: #B38328;

  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-float:  0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-modal:  0 24px 80px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.08);
  --shadow-brand:  0 12px 40px rgba(36,107,255,0.12);
  --shadow-cta:    0 4px 16px rgba(37,99,235,0.28);
  --shadow-cta-hover: 0 6px 24px rgba(37,99,235,0.38);

  --r-pill:    999px;
  --r-card:    20px;
  --r-card-lg: 24px;
  --r-card-xl: 28px;
  --r-tile:    16px;
  --r-chip:    12px;
  --r-frame:   16px;

  --easing:        cubic-bezier(0.22, 1, 0.36, 1);
  --easing-motion: cubic-bezier(0.20, 0.72, 0.20, 1);
  --t-fast: 180ms; --t-base: 300ms; --t-slow: 420ms; --t-reveal: 720ms;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "JetBrains Mono", "Roboto Mono",
               Consolas, monospace;

  --t-display:    clamp(3.05rem, 7vw, 5.25rem);
  --t-h1:         clamp(2.1rem, 4.5vw, 2.75rem);
  --t-h2:         1.5rem;
  --t-h3:         1.25rem;
  --t-body:       0.9375rem;
  --t-body-sm:    0.8125rem;
  --t-meta:       0.6875rem;
  --t-mono-label: 0.59375rem;

  --ls-display: -0.04em;
  --ls-h2:      -0.02em;
  --ls-body:    -0.01em;
  --ls-caps:    0.16em;
  --ls-caps-wide: 0.22em;
}

[data-theme="dark"] {
  --fg-1: #F9FAFB;
  --fg-2: #D1D5DB;
  --fg-3: rgba(245,247,251,0.66);
  --fg-4: rgba(245,247,251,0.42);
  --fg-mono-dim: rgba(255,255,255,0.30);

  --bg-page:       #07101A;
  --bg-page-warm:  #09090C;
  --bg-card:       #0F1117;
  --bg-card-sub:   #13151C;
  --bg-card-hover: #171a22;
  --bg-glass:      rgba(12,18,32,0.72);
  --bg-glass-strong: rgba(12,18,32,0.84);

  --line:          rgba(255,255,255,0.07);
  --line-strong:   rgba(255,255,255,0.11);
  --line-accent:   rgba(37,99,235,0.30);

  --bg-tint-blue:   rgba(45,168,255,0.08);
  --bg-tint-violet: rgba(123,44,255,0.07);

  --shadow-card:   0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.20);
  --shadow-float:  0 8px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.20);
  --shadow-brand:  0 12px 40px rgba(36,107,255,0.22);
}

* , *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}