/* ============================================================
   CALLSTOP.TRADE — Colors & Type
   "Trading terminal meets casino floor."
   Green (up/long/call/win) and Red (down/short/put/loss) are
   CO-EQUAL brand pillars. Amber-gold is the jackpot accent.
   ============================================================ */

/* Fonts: all Google Fonts (free). Loaded via CDN below.
   - Anton          → display / marquee headlines / jackpot numerals
   - Space Grotesk  → UI + body
   - JetBrains Mono → prices, tickers, tabular data (terminal)            */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
  /* ---------- BASE COLOR PALETTE ---------- */

  /* Void & surfaces (the casino is dark) */
  --void:        #08090B;   /* page background */
  --surface-0:   #0E1014;   /* base panel */
  --surface-1:   #15181E;   /* raised card */
  --surface-2:   #1D212A;   /* hover / input / popover */
  --surface-3:   #272C37;   /* active / selected */

  /* Lines & borders */
  --line:        #262B34;   /* default hairline */
  --line-strong: #353C48;   /* emphasized divider */

  /* Foreground / text */
  --fg-1:        #F4F6F8;   /* primary text */
  --fg-2:        #9BA3AD;   /* secondary text */
  --fg-3:        #5C6671;   /* tertiary / disabled */
  --fg-inverse:  #08090B;   /* text on bright fills */

  /* ---------- THE DUALITY: GREEN vs RED ---------- */
  /* Green = UP · LONG · CALL · WIN */
  --up:          #1FE07A;
  --up-bright:   #5BFFA8;   /* glow / hover highlight */
  --up-deep:     #0B7E45;   /* pressed / shadow */
  --up-wash:     rgba(31, 224, 122, 0.12); /* tints, chart fills */
  --up-line:     rgba(31, 224, 122, 0.40);

  /* Red = DOWN · SHORT · PUT · LOSS */
  --down:        #FF2D55;
  --down-bright: #FF6B82;
  --down-deep:   #A30E2C;
  --down-wash:   rgba(255, 45, 85, 0.12);
  --down-line:   rgba(255, 45, 85, 0.40);

  /* ---------- JACKPOT ACCENT ---------- */
  --gold:        #FFB323;   /* premium, jackpot, highlights, focus */
  --gold-bright: #FFD15C;
  --gold-deep:   #B97700;
  --gold-wash:   rgba(255, 179, 35, 0.12);

  /* ---------- GLOWS (neon-sign energy) ---------- */
  --glow-up:   0 0 0 1px var(--up-line), 0 0 22px -4px rgba(31,224,122,0.65);
  --glow-down: 0 0 0 1px var(--down-line), 0 0 22px -4px rgba(255,45,85,0.65);
  --glow-gold: 0 0 0 1px rgba(255,179,35,0.45), 0 0 22px -4px rgba(255,179,35,0.6);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif; /* marquee */
  --font-ui:      'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (semantic) ---------- */
  --text-mega:   clamp(56px, 9vw, 132px); /* hero marquee */
  --text-h1:     clamp(40px, 5vw, 64px);
  --text-h2:     34px;
  --text-h3:     24px;
  --text-lg:     18px;
  --text-base:   15px;
  --text-sm:     13px;
  --text-xs:     11px;
  --text-micro:  10px;

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

  /* ---------- RADII (terminal-sharp, not bubbly) ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 8px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -8px rgba(0,0,0,0.7);
  --shadow-pop: 0 24px 60px -16px rgba(0,0,0,0.8);

  /* ---------- MOTION ---------- */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1);   /* quick, confident */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 110ms;
  --dur-med:  200ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — use these classes directly
   ============================================================ */

.cs-mega {
  font-family: var(--font-display);
  font-size: var(--text-mega);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cs-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cs-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cs-h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.cs-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.cs-body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg-2);
}

.cs-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

/* Numbers / prices / tickers — ALWAYS mono, tabular */
.cs-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.cs-up   { color: var(--up); }
.cs-down { color: var(--down); }
.cs-gold { color: var(--gold); }