/* ============================================================
   Vault — Currency Converter Design System
   Colors & Type tokens
   ============================================================ */

/* --- Webfonts (Google Fonts CDN) --- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — Surfaces (dark theme is canonical)
     ---------------------------------------------------------- */

  /* Canvas */
  --canvas-0: oklch(0.14 0.005 60);
  --canvas-1: oklch(0.17 0.006 60);
  --canvas-2: oklch(0.21 0.008 60);

  /* Glass — translucent tile fills (used over canvas with backdrop-blur) */
  --glass-thin:    oklch(1 0 0 / 0.04);
  --glass-base:    oklch(1 0 0 / 0.07);
  --glass-thick:   oklch(1 0 0 / 0.11);
  --glass-stroke:  oklch(1 0 0 / 0.10);
  --glass-stroke-2:oklch(1 0 0 / 0.18);
  --glass-inner-hi:oklch(1 0 0 / 0.22);
  --glass-inner-lo:oklch(0 0 0 / 0.45);

  /* Solid dark tile */
  --tile-black:    oklch(0.13 0.004 60);
  --tile-black-hi: oklch(0.18 0.005 60);

  /* Foreground */
  --fg-1:  oklch(0.98 0.002 80);
  --fg-2:  oklch(0.78 0.005 80);
  --fg-3:  oklch(0.58 0.006 80);
  --fg-4:  oklch(0.42 0.005 80);
  --fg-on-accent: oklch(0.16 0.01 60);

  /* ----------------------------------------------------------
     COLOR — Accents
     ---------------------------------------------------------- */
  --gold-1:  oklch(0.92 0.13 90);
  --gold-2:  oklch(0.82 0.16 80);
  --gold-3:  oklch(0.62 0.14 70);

  --lime-1:  oklch(0.95 0.20 130);
  --lime-2:  oklch(0.88 0.24 128);
  --lime-3:  oklch(0.70 0.22 130);

  --acc-currency: oklch(0.78 0.13 240);
  --acc-crypto:   oklch(0.78 0.18 50);
  --acc-metals:   var(--gold-2);

  /* Markets */
  --up:    oklch(0.85 0.22 135);
  --down:  oklch(0.70 0.21 25);
  --flat:  var(--fg-3);

  /* Status */
  --info:    oklch(0.78 0.13 240);
  --warn:    oklch(0.84 0.16 80);
  --error:   oklch(0.70 0.21 25);
  --success: var(--lime-2);

  /* ----------------------------------------------------------
     ELEVATION
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px -8px oklch(0 0 0 / 0.55);
  --shadow-lg: 0 24px 60px -16px oklch(0 0 0 / 0.7);

  --bevel-up:
    inset 0 1px 0 0 var(--glass-inner-hi),
    inset 0 -1px 0 0 var(--glass-inner-lo);

  --bevel-soft:
    inset 0 1px 0 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 0 oklch(0 0 0 / 0.3);

  --glow-gold: 0 0 60px -10px oklch(0.82 0.16 80 / 0.45);
  --glow-lime: 0 0 60px -10px oklch(0.88 0.24 128 / 0.5);
  --glow-ember:0 0 80px -10px oklch(0.78 0.18 50 / 0.55);

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ----------------------------------------------------------
     TYPE — Geist (sans), Geist Mono (display + numerals), Instrument Serif (accent)
     ---------------------------------------------------------- */
  --font-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

  /* Type scale */
  --t-display-2xl: 128px;
  --t-display-xl:  96px;
  --t-display-lg:  72px;
  --t-display-md:  56px;
  --t-display-sm:  40px;

  --t-h1: 32px;
  --t-h2: 24px;
  --t-h3: 20px;
  --t-h4: 17px;

  --t-body-lg: 17px;
  --t-body:    15px;
  --t-body-sm: 13px;
  --t-caption: 12px;
  --t-micro:   11px;

  --lh-tight:  1.0;
  --lh-display:1.04;
  --lh-snug:   1.2;
  --lh-body:   1.45;
  --lh-loose:  1.6;

  --ls-tight:   -0.04em;
  --ls-display: -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.18em;

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.4, 0.5, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--canvas-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}