/* =========================================================
   GRIND MACHINE — colors_and_type.css
   Two surfaces: Marketing site (lime + monochrome) and
   Dashboard app (emerald + glassmorphic gradients).
   Use [data-surface="site"] OR [data-surface="app"] on root.
   ========================================================= */

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

:root,
[data-surface="site"] {
  /* ---- Surfaces (very dark, near-black) ---- */
  --bg:        #0a0a0a;
  --bg-2:      #0e0e0e;
  --panel:     #121212;
  --panel-2:   #181818;

  /* ---- Lines / borders (low-contrast) ---- */
  --line:      #1f1f1f;
  --line-2:    #2a2a2a;

  /* ---- Foreground scale (near-white → faint) ---- */
  --fg:        #ededed;
  --fg-dim:    #8a8a8a;
  --fg-faint:  #4a4a4a;
  --fg-ghost:  #2f2f2f;

  /* ---- Brand accent (signature lime) ---- */
  --accent:        #b4ff39;
  --accent-fg:     #0a0a0a;
  --accent-deep:   #7ac41f; /* used in conic gradients on the brand mark */

  /* ---- Semantic ---- */
  --up:        #3dffa2;   /* gains, "BUY" */
  --down:      #ff4d6d;   /* losses, "SELL" */
  --warn:      #ffd43b;   /* PUMP/DUMP, alerts */
  --blue:      #4d9fff;   /* SPREAD-DEX */
  --violet:    #b48cff;   /* RSI */

  /* ---- Radii ---- */
  --radius:    4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---- Type ---- */
  --font:      "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Layout ---- */
  --nav-h:     56px;
  --wrap:      1320px;
  --pad:       clamp(20px, 4vw, 48px);

  color-scheme: dark;
}

/* ---- Accent swaps used as Tweaks on the marketing site ---- */
[data-surface="site"][data-accent="blue"]   { --accent:#6aa8ff; --accent-fg:#03080f; }
[data-surface="site"][data-accent="orange"] { --accent:#ff7a1f; --accent-fg:#0a0a0a; }
[data-surface="site"][data-accent="white"]  { --accent:#fafafa; --accent-fg:#0a0a0a; }
[data-surface="site"][data-accent="violet"] { --accent:#b48cff; --accent-fg:#0a0a0a; }

/* =========================================================
   DASHBOARD APP SURFACE
   Glass / blur / radial gradient bg, emerald accent
   ========================================================= */
[data-surface="app"] {
  --bg-primary:        #050508;
  --bg-card:           #0a0a0f;
  --bg-card-2:         #0f0f1e;

  --accent-primary:    #10b981;       /* emerald-500 */
  --accent-primary-2:  #34d399;       /* emerald-400 */
  --accent-secondary:  #0ea5e9;       /* sky-500 */
  --accent-purple:     #a855f7;       /* AI accents */

  --text-primary:      #f5f5f5;
  --text-secondary:    #a3a3a3;       /* neutral-400 */
  --text-muted:        #737373;       /* neutral-500 */
  --text-faint:        #525252;       /* neutral-600 */

  --border:            rgba(255, 255, 255, 0.06);
  --border-strong:     rgba(255, 255, 255, 0.10);

  --glow-primary:      0 0 40px rgba(16, 185, 129, 0.30);
  --glow-secondary:    0 0 40px rgba(14, 165, 233, 0.30);
  --glow-loss:         0 0 30px rgba(239, 68, 68, 0.30);

  --radius:            10px;
  --radius-md:         12px;
  --radius-lg:         16px;
  --radius-xl:         24px;

  --shadow-card:       0 4px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.03);
  --shadow-lift:       0 10px 40px rgba(0,0,0,.30);

  --font:              "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:         "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* =========================================================
   BASE TYPOGRAPHY (works on both surfaces)
   ========================================================= */
body {
  background: var(--bg, #0a0a0a);
  color: var(--fg, #ededed);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
  font-feature-settings: "ss01", "cv11";
}

/* Tightened display headings — Linear/Vercel feel */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -.025em; }

/* ---- Semantic display tokens (marketing site) ---- */
.t-display {
  font-family: var(--font);
  font-size: clamp(40px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 500;
}
.t-h1 {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 500;
}
.t-h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 500;
}
.t-h3 {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 500;
}
.t-h4 {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 500;
}
.t-h5 {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 500;
}
.t-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.t-lede {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--fg-dim);
  line-height: 1.5;
}
.t-small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dim);
}
.t-mono {
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}
.t-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.t-data-label {
  /* dashboard: 10px, ALL CAPS, very wide tracking */
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--fg-faint, #525252);
}
.t-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Color helpers ---- */
.fg     { color: var(--fg); }
.fg-dim { color: var(--fg-dim); }
.faint  { color: var(--fg-faint); }
.up     { color: var(--up); }
.down   { color: var(--down); }
.warn   { color: var(--warn); }
.accent { color: var(--accent); }