/* ============================================================
   VNISH DESIGN SYSTEM — Colors & Type
   Dark-first, high-performance mining/firmware brand.
   Inspired by asic.to + vnish.com, polished like gladia.io.
   ============================================================ */

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

:root {
  /* ---- FONT FAMILIES ---------------------------------- */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif; /* headings, hero, eyebrows */
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;   /* UI + paragraphs */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* hashrate, versions, code, data */

  /* ============================================================
     COLOR — NEUTRAL RAMP (cool graphite)
     ============================================================ */
  --ink-950: #07090C;  /* deepest / behind everything */
  --ink-900: #0A0D11;  /* page background */
  --ink-850: #0E1217;  /* alt section background */
  --ink-800: #131820;  /* card surface */
  --ink-750: #181E27;  /* raised surface / inputs */
  --ink-700: #1F2630;  /* hover surface */
  --ink-600: #2A323E;  /* borders strong */
  --ink-500: #3A4350;  /* hairline on light hover */
  --ink-400: #5A6675;  /* disabled text */
  --ink-300: #7B8694;  /* muted text */
  --ink-200: #A6B0BD;  /* secondary text */
  --ink-100: #D5DBE3;  /* near-white text */
  --ink-050: #F3F6FA;  /* primary text on dark */
  --white:   #FFFFFF;

  /* ---- SURFACES & BORDERS (semantic) ------------------ */
  --bg:            var(--ink-900);
  --bg-alt:        var(--ink-850);
  --surface:       var(--ink-800);
  --surface-raised:var(--ink-750);
  --surface-hover: var(--ink-700);
  --border:        #222A35;
  --border-soft:   #1A212B;
  --border-strong: #303a47;

  /* ---- TEXT (semantic) -------------------------------- */
  --fg-1: var(--ink-050);  /* headings, primary */
  --fg-2: var(--ink-200);  /* body, secondary */
  --fg-3: var(--ink-300);  /* muted, captions */
  --fg-disabled: var(--ink-400);

  /* ============================================================
     COLOR — BRAND ACCENT (teal→mint = energy / hashrate / profit)
     vnish.it locale — Devin-inspired blue→teal→mint palette.
     (legacy --lime-* names kept as aliases so existing markup still maps.)
     ============================================================ */
  /* TEAL-MINT accent ramp (light → dark) — #2BD4A0 is the brand teal */
  --teal-050: #E7FBF4;
  --teal-100: #BFF4E2;
  --teal-200: #7CF0C4;  /* mint highlight */
  --teal-300: #2BD4A0;  /* PRIMARY brand accent (teal-mint) */
  --teal-400: #20BE8E;
  --teal-500: #16A87C;  /* pressed / deep */
  --teal-600: #0F8A66;  /* text-on-light */
  --teal-700: #0B6B4F;  /* text-on-light, strong */

  /* legacy aliases — markup that still says --lime-* resolves to teal */
  --lime-050: var(--teal-050);
  --lime-100: var(--teal-100);
  --lime-200: var(--teal-200);
  --lime-300: var(--teal-300);
  --lime-400: var(--teal-400);
  --lime-500: var(--teal-500);
  --lime-600: var(--teal-600);
  --lime-700: var(--teal-700);

  --accent:        var(--teal-300);
  --accent-rgb:    43,212,160;   /* accent as r,g,b for rgba() tints + glows */
  --accent-hover:  var(--teal-200);
  --accent-press:  var(--teal-500);
  --accent-ink:    #03261F;   /* text ON accent (deep teal near-black) */
  --accent-soft:   rgba(43,212,160, 0.13);  /* tints, glows, chip bg */
  --accent-line:   rgba(43,212,160, 0.34);  /* hairline on accent surfaces */

  /* ---- SECONDARY DATA HUE (azure blue — Devin gradient origin, charts/links) */
  --ice-300: #5AA2FF;
  --ice-400: #2E8BFF;  /* azure — gradient start, secondary accent */
  --ice-500: #1C6FE0;
  --ice-soft: rgba(46, 139, 255, 0.12);
  /* mint-glow secondary accent */
  --sand: #7CF0C4;
  --sand-soft: rgba(110, 231, 183, 0.16);

  /* ============================================================
     SEMANTIC STATES
     ============================================================ */
  --success: var(--lime-300);
  --success-soft: var(--accent-soft);
  --warning: #FFB020;
  --warning-soft: rgba(255, 176, 32, 0.12);
  --danger:  #FF5C5C;
  --danger-soft: rgba(255, 92, 92, 0.12);
  --info: var(--ice-400);
  --info-soft: var(--ice-soft);

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* ============================================================
     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; --sp-24: 96px;
  --sp-32: 128px;

  /* ============================================================
     ELEVATION / SHADOWS (dark UI — shadows are deep, not soft)
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.7);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.8);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
  /* signature accent glow — use on primary CTAs & hero device only */
  --glow-accent: 0 0 0 1px var(--accent-line), 0 8px 40px -8px rgba(43,212,160,0.34);
  --glow-accent-strong: 0 0 60px -10px rgba(43,212,160,0.5);

  /* ============================================================
     SIGNATURE GRADIENTS & TEXTURES
     ============================================================ */
  /* subtle top glow behind hero — Devin blue→teal wash */
  --grad-hero: radial-gradient(120% 80% at 50% -10%, rgba(46,139,255,0.13) 0%, rgba(43,212,160,0.10) 32%, rgba(43,212,160,0.0) 60%);
  /* faint vignette to ground dark sections */
  --grad-vignette: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.025), rgba(0,0,0,0) 60%);
  /* accent button sheen — signature blue→teal→mint */
  --grad-accent: linear-gradient(120deg, #2E8BFF 0%, #2BD4A0 55%, #7CF0C4 100%);
  /* technical grid line color */
  --grid-line: rgba(255,255,255,0.035);

  /* ---- MOTION ----------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 420ms;
}

/* ============================================================
   TYPOGRAPHY — semantic classes
   Headings: Space Grotesk. Body: Manrope. Data: JetBrains Mono.
   ============================================================ */
.ds-display-1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.028em; color: var(--fg-1); }
.ds-display-2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--fg-1); }
.ds-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.022em; color: var(--fg-1); }
.ds-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(27px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg-1); }
.ds-h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg-1); }
.ds-h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-1); }

.ds-body-lg { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.65; color: var(--fg-2); }
.ds-body    { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.ds-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.ds-caption { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--fg-3); }

/* Eyebrow / kicker — mono, uppercase, accent. Signature label style. */
.ds-eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
/* Data figures — big stats, hashrate, versions */
.ds-data { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.ds-code { font-family: var(--font-mono); font-weight: 400; font-size: 13.5px; color: var(--ink-100); }