/* =============================================================
   Currency Calculator — Design Tokens
   Drop this into your global stylesheet (or import as a CSS module).
   All UI primitives consume these variables — never hard-code values.
   ============================================================= */

:root {
  /* ── Surfaces (warm near-black, plum bleed) ───────────────── */
  --bg-base:        #0A0507;
  --bg-tint:        #110A0E;
  --bg-elevated:    #1A1316;
  --bg-elevated-2:  #221A1E;
  --border-subtle:  rgba(255,255,255,0.06);
  --border-soft:    rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:    #FFFFFF;
  --text-secondary:  rgba(255,255,255,0.72);
  --text-tertiary:   rgba(255,255,255,0.48);
  --text-quaternary: rgba(255,255,255,0.32);

  /* ── Primary CTA — vivid orange ──────────────────────────── */
  --cta:        #FF6B2C;
  --cta-hover:  #FF7F47;
  --cta-press:  #E85816;
  --cta-soft:   rgba(255, 107, 44, 0.12);
  --cta-line:   rgba(255, 107, 44, 0.32);

  /* ── Category jewel tones (use sparingly, one per "category") */
  --cat-magenta: #D946A6;
  --cat-violet:  #8B5CF6;
  --cat-cyan:    #22D3EE;
  --cat-amber:   #F4B740;

  /* ── Status ──────────────────────────────────────────────── */
  --status-warn: #F4B740;
  --status-bad:  #E5484D;
  --status-good: #FF6B2C;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-pill:  999px;
  --r-card:  24px;
  --r-input: 16px;
  --r-chip:  12px;
  --r-badge: 4px;

  /* ── Shadow / glow ───────────────────────────────────────── */
  --glow-plum: 0 40px 120px rgba(217, 70, 166, 0.20);
  --glow-cta:  0 12px 40px rgba(255, 107, 44, 0.25);
  --shadow-card: 0 40px 80px -40px rgba(0,0,0,0.6),
                 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-tooltip: 0 8px 24px rgba(0,0,0,0.4);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-gutter: 32px;
  --section-pad-y: 96px;
  --section-pad-y-sm: 64px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

body {
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(255, 107, 44, 0.10), transparent 60%),
    radial-gradient(900px  500px at -12% 18%, rgba(255, 107, 44, 0.05), transparent 60%),
    var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--cta); color: #0A0507; }