/* ==========================================================================
   CryptoPrice.co — Foundations
   Colors, Type, Spacing, Radii, Shadows, Motion
   ==========================================================================
   Vibe: precise, data-first, terminal-inspired but warmer than Bloomberg.
   Defaults to dark (the trader's mode); .light overrides for light mode.
   ========================================================================== */

/* ---------- FONTS ---------- */
/* Primary UI: Inter Tight — geometric, dense, screen-optimized
   Display:    Geist — for hero numbers and marketing headlines
   Mono:       JetBrains Mono — for tickers, prices, data tables, code */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Geist:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --brand-lime:        #C6F24E;   /* signature — bullish, CTAs, primary */
  --brand-lime-soft:   #E4F89D;
  --brand-lime-deep:   #9BC52E;
  --brand-ink:         #0A0D10;   /* near-black, the canvas */

  /* ---------- MARKET SIGNALS ---------- */
  /* Two pairs — soft (badges, backgrounds) and strong (numbers, dots) */
  --up:        #00C896;  /* mint green — gains. NOT red/green color-blind hostile. */
  --up-soft:   rgba(0, 200, 150, 0.12);
  --up-deep:   #008F6B;
  --down:      #FF5A5F;  /* coral red — losses. */
  --down-soft: rgba(255, 90, 95, 0.12);
  --down-deep: #C8333A;
  --warn:      #F5A623;  /* amber — alerts, pending */
  --warn-soft: rgba(245, 166, 35, 0.12);
  --info:      #4DA3FF;  /* blue — links, info */
  --info-soft: rgba(77, 163, 255, 0.12);

  /* ---------- NEUTRALS — DARK (default) ---------- */
  --bg-0:  #0A0D10;   /* page */
  --bg-1:  #11151A;   /* panel */
  --bg-2:  #181D24;   /* elevated panel, table header */
  --bg-3:  #20262E;   /* hovered row, inputs */
  --bg-4:  #2A313B;   /* active, pressed */

  --line-1: rgba(255,255,255,0.06);  /* hairline divider */
  --line-2: rgba(255,255,255,0.10);  /* default border */
  --line-3: rgba(255,255,255,0.16);  /* hovered border */

  --fg-0: #F5F7FA;   /* primary text — high contrast titles, prices */
  --fg-1: #D4D9E0;   /* body text */
  --fg-2: #8B95A3;   /* secondary, labels, axes */
  --fg-3: #5A6573;   /* tertiary, placeholder, disabled */

  /* ---------- TYPE ---------- */
  --font-sans:    'Inter Tight', -apple-system, system-ui, sans-serif;
  --font-display: 'Geist', 'Inter Tight', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — tight, dense, dashboard-friendly */
  --t-xs:   11px;   /* labels, axis ticks */
  --t-sm:   12px;   /* table cells, secondary */
  --t-base: 14px;   /* body */
  --t-md:   16px;   /* emphasized body */
  --t-lg:   20px;   /* card titles */
  --t-xl:   28px;   /* section headers */
  --t-2xl:  40px;   /* page heroes, big prices */
  --t-3xl:  56px;   /* marketing display */
  --t-4xl:  88px;   /* marketing hero */

  --font-leading-tight: 1.1;
  --font-leading-snug:  1.25;
  --font-leading-base:  1.5;
  --font-leading-loose: 1.65;

  --tracking-tight: -0.02em;   /* display */
  --tracking-snug:  -0.01em;   /* h1/h2 */
  --tracking-base:  0;
  --tracking-wide:   0.04em;   /* eyebrows, all-caps labels */
  --tracking-mono:  -0.01em;   /* prices */

  /* ---------- 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;
  --s-24: 96px;

  /* ---------- RADII ---------- */
  --r-sm:   4px;    /* badges, chips */
  --r-md:   8px;    /* buttons, inputs */
  --r-lg:   12px;   /* cards */
  --r-xl:   16px;   /* hero panels */
  --r-2xl:  24px;
  --r-full: 999px;

  /* ---------- SHADOWS — tuned for dark UI ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-glow-up:   0 0 0 1px rgba(0,200,150,0.30), 0 8px 24px rgba(0,200,150,0.15);
  --shadow-glow-lime: 0 0 0 1px rgba(198,242,78,0.40), 0 8px 32px rgba(198,242,78,0.25);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --header-h: 56px;
  --sidebar-w: 232px;
  --max-w: 1440px;
}

/* ---------- LIGHT MODE ---------- */
.light {
  --bg-0: #FAFBFC;
  --bg-1: #FFFFFF;
  --bg-2: #F4F6F8;
  --bg-3: #ECEFF3;
  --bg-4: #DDE2E8;

  --line-1: rgba(10,13,16,0.06);
  --line-2: rgba(10,13,16,0.10);
  --line-3: rgba(10,13,16,0.16);

  --fg-0: #0A0D10;
  --fg-1: #2A313B;
  --fg-2: #5A6573;
  --fg-3: #8B95A3;

  --shadow-sm: 0 1px 2px rgba(10,13,16,0.06);
  --shadow-md: 0 4px 12px rgba(10,13,16,0.08), 0 1px 2px rgba(10,13,16,0.04);
  --shadow-lg: 0 12px 32px rgba(10,13,16,0.10), 0 2px 6px rgba(10,13,16,0.05);
}

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

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--font-leading-base);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter Tight tabular hints */
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: var(--font-leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-0);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: var(--font-leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-0);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: var(--font-leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-0);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: var(--font-leading-snug);
  color: var(--fg-0);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--font-leading-loose);
  color: var(--fg-1);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: var(--tracking-base);
}

.num, code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';   /* tabular figures, slashed zero */
  letter-spacing: var(--tracking-mono);
}

.price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-0);
}
.price--up   { color: var(--up); }
.price--down { color: var(--down); }

::selection { background: var(--brand-lime); color: var(--brand-ink); }