/* =========================================================
   LeverUp — Colors & Type
   Fully Transparent Perpetuals. LP-Free. Up to 1001x leverage.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=Orbitron:wght@500;700;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* --- Base canvas / surfaces (dark-first, layered) --- */
  --bg-canvas: #0f0f0f;
  --bg-app: #121212;
  --bg-panel: #131514;
  --bg-surface-1: #1c1d1e;
  --bg-surface-2: #1e1e1e;
  --bg-surface-3: #262627;
  --bg-surface-hover: #2a2a2a;

  /* --- Borders --- */
  --border-default: #2a2a2a;
  --border-strong: #494949;
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* --- Text --- */
  --text-primary: #fafafa;
  --text-secondary: #e1e1e1;
  --text-muted: #aeb0ac;
  --text-subtle: #7c8080;
  --text-faint: #707070;
  --text-on-accent: #0b0b0b;

  /* --- Market accents (acidic green / orange-red, NOT typical finance) --- */
  --accent-long: #c7f50d;
  --accent-long-strong: #ccff00;
  --accent-long-soft: #dffb62;
  --accent-long-bg: #2f3610;
  --accent-long-deep: #4d5f04;

  --accent-short: #fa5000;
  --accent-short-strong: #ee1010;
  --accent-short-bg: #321414;
  --accent-short-deep: #bc244a;

  /* --- Utility --- */
  --info: #1283da;
  --success: #11af22;
  --error: #ef3061;
  --warning: #ffd600;

  /* --- Grid background (competition / overview pages) --- */
  --grid-line: rgba(255, 255, 255, 0.05);
  --grid-size: 20px;

  /* --- Type families --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, sans-serif; /* trade buttons, pills, tabs */
  --font-display: 'Orbitron', 'Inter', sans-serif; /* sparse, high-impact only */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Type scale --- */
  --fs-hero: 56px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 14px;
  --fs-body-lg: 16px;
  --fs-label: 12px;
  --fs-meta: 11px;

  /* --- Spacing (4/6/8/10/12/16/20/24/32) --- */
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-2-5: 10px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* --- Radii --- */
  --r-ctrl: 4px;
  --r-card: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* --- Shadows / glow (restrained) --- */
  --shadow-edge: 0 0 0 1px var(--border-default);
  --shadow-edge-strong: 0 0 0 1px var(--border-strong);
  --shadow-ambient: 0 8px 24px rgba(0, 0, 0, 0.4);
  --glow-long: 0 0 0 1px var(--accent-long), 0 0 16px rgba(199, 245, 13, 0.25);
  --glow-short: 0 0 0 1px var(--accent-short), 0 0 16px rgba(250, 80, 0, 0.25);

  /* --- Motion --- */
  --t-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-default: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-slow: 200ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* =========================================================
   Base reset + body
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   Semantic type classes (use these as defaults)
   ========================================================= */
.lu-hero      { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); }
.lu-h1        { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.015em; color: var(--text-primary); }
.lu-h2        { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.lu-h3        { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--text-primary); }
.lu-body      { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); color: var(--text-secondary); }
.lu-body-lg   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-lg); color: var(--text-secondary); }
.lu-label     { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--text-muted); text-transform: none; }
.lu-meta      { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-meta); color: var(--text-subtle); }
.lu-num       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; font-weight: 500; }
.lu-num-big   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 32px; color: var(--text-primary); }
.lu-display   { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }

.lu-long      { color: var(--accent-long); }
.lu-short     { color: var(--accent-short); }
.lu-muted     { color: var(--text-muted); }
.lu-subtle    { color: var(--text-subtle); }

/* =========================================================
   Shared page backgrounds
   ========================================================= */
.lu-bg-grid {
  background-color: var(--bg-canvas);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}