/* Liquidbots color system — values verbatim from the Visual Identity Guide, p.3 */
:root{
  /* ---- Primary ---- */
  --void-black:#050507;      /* primary background */
  --graphite:#111216;        /* secondary background */
  --slate:#1E2025;           /* cards / UI surfaces */
  --liquid-teal:#1FE4CC;     /* primary brand color */
  --neon-violet:#C34BFF;     /* accent / highlights */
  --electric-blue:#2E6CFF;   /* secondary accent */
  --soft-white:#F4F4F5;      /* typography / text */

  /* ---- Supporting ---- */
  --aqua-glow:#5DF6E3;       /* glass highlights */
  --royal-indigo:#4A46FF;    /* secondary gradients */
  --deep-cyan:#0FB7D9;       /* interface lines */
  --bull-green:#24D67A;      /* positive indicators */
  --bear-red:#FF5C7A;        /* negative indicators */

  /* ---- Neutral ramp (derived from the three dark primaries) ---- */
  --ink-900:#050507;
  --ink-800:#0A0B0E;
  --ink-700:#111216;
  --ink-600:#16181D;
  --ink-500:#1E2025;
  --ink-400:#282B31;
  --ink-300:#3A3E46;
  --ink-200:#5A6070;
  --ink-100:#8A909C;
  --ink-050:#C6C9CF;

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--void-black);
  --surface-raised:var(--graphite);
  --surface-card:var(--slate);
  --surface-card-translucent:rgba(30,32,37,.55);
  --surface-glass:rgba(244,244,245,.04);
  --surface-input:#0E1013;
  --surface-hover:#23262C;
  --surface-active:#2A2E35;
  --surface-inverse:var(--soft-white);

  /* ---- Semantic text ---- */
  --text-primary:var(--soft-white);
  --text-secondary:#A7ADB8;
  --text-tertiary:#7D8390;      /* was #6E7481: 4.34:1 on void-black, below the 4.5:1 AA minimum */
  --text-disabled:#4A4F59;
  --text-brand:var(--liquid-teal);
  --text-on-brand:#031714;
  --text-inverse:var(--void-black);
  --text-link:var(--liquid-teal);
  --text-link-hover:var(--aqua-glow);

  /* ---- Semantic borders / lines ---- */
  --border-subtle:rgba(244,244,245,.07);
  --border-default:rgba(244,244,245,.12);
  --border-strong:rgba(244,244,245,.22);
  --border-brand:rgba(31,228,204,.45);
  --border-interface:var(--deep-cyan);
  --divider:rgba(244,244,245,.08);

  /* ---- Semantic action ---- */
  --action-primary:var(--liquid-teal);
  --action-primary-hover:var(--aqua-glow);
  --action-primary-active:#11C7D7;
  --action-secondary:#2B2F36;
  --action-secondary-hover:#363B44;
  --action-ghost-hover:rgba(244,244,245,.06);

  /* ---- Market / status ---- */
  --market-up:var(--bull-green);
  --market-down:var(--bear-red);
  --status-positive:var(--bull-green);
  --status-negative:var(--bear-red);
  --status-info:var(--electric-blue);
  --status-warning:#FFB02E;
  --status-neutral:var(--ink-100);
  --status-live:var(--liquid-teal);

  /* ---- Gradients (identity guide: suggested combinations) ---- */
  --gradient-primary-brand:linear-gradient(135deg,#1FE4CC 0%,#11C7D7 100%); /* @kind color */
  --gradient-hero:linear-gradient(135deg,#2E6CFF 0%,#C34BFF 100%); /* @kind color */
  --gradient-glass-highlight:linear-gradient(135deg,#5DF6E3 0%,#1FE4CC 50%,#2E6CFF 100%); /* @kind color */
  --gradient-purple-glow:linear-gradient(135deg,#8B5CFF 0%,#C34BFF 100%); /* @kind color */
  --gradient-card-veil:linear-gradient(180deg,rgba(31,228,204,.06) 0%,rgba(5,5,7,0) 60%); /* @kind color */
  --gradient-protection:linear-gradient(180deg,rgba(5,5,7,0) 0%,rgba(5,5,7,.85) 70%,#050507 100%); /* @kind color */
}

/* Liquidbots typography — identity guide p.4 */
:root{
  --font-display:"Open Sans","Helvetica Neue",Arial,sans-serif; /* @kind font */   /* H1 — Light Italic & Bold Italic */
  --font-core:"Outfit","Open Sans",Arial,sans-serif; /* @kind font */              /* H2 / UI — substitute for Axiforma */
  --font-body:"Figtree","Open Sans",Arial,sans-serif; /* @kind font */             /* body copy — 16px / 1.6 */
  --font-numeric:"Figtree","Open Sans",Arial,sans-serif; /* @kind font */          /* data: use with --fv-tabular */
  --fv-tabular:"tnum" 1,"lnum" 1; /* @kind font */

  --fw-extralight:200; /* @kind font */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Type scale */
  --fs-display-xl:88px; /* @kind font */
  --fs-display-l:64px; /* @kind font */
  --fs-display-m:48px; /* @kind font */
  --fs-h1:40px; /* @kind font */
  --fs-h2:32px; /* @kind font */
  --fs-h3:24px; /* @kind font */
  --fs-h4:20px; /* @kind font */
  --fs-body-l:18px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-body-s:14px; /* @kind font */
  --fs-caption:13px; /* @kind font */
  --fs-label:12px; /* @kind font */
  --fs-micro:11px; /* @kind font */

  --lh-tight:1.02; /* @kind font */
  --lh-display:1.08; /* @kind font */
  --lh-heading:1.2; /* @kind font */
  --lh-snug:1.35; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-loose:1.75; /* @kind font */

  --ls-display:-0.01em; /* @kind font */
  --ls-heading:0.01em; /* @kind font */
  --ls-wide:0.06em; /* @kind font */   /* headline / nav tracking */
  --ls-wider:0.14em; /* @kind font */  /* eyebrows, labels, footer lockup */
  --ls-body:0; /* @kind font */

  /* Composed roles */
  --type-hero:var(--fw-light) var(--fs-display-xl)/var(--lh-display) var(--font-display); /* @kind font */
  --type-hero-strong:var(--fw-bold) var(--fs-display-xl)/var(--lh-display) var(--font-display); /* @kind font */
  --type-section:var(--fw-light) var(--fs-display-m)/var(--lh-heading) var(--font-core); /* @kind font */
  --type-h2:var(--fw-light) var(--fs-h2)/var(--lh-heading) var(--font-core); /* @kind font */
  --type-h3:var(--fw-regular) var(--fs-h3)/var(--lh-snug) var(--font-core); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
  --type-body-s:var(--fw-regular) var(--fs-body-s)/var(--lh-body) var(--font-body); /* @kind font */
  --type-label:var(--fw-medium) var(--fs-label)/1.3 var(--font-core); /* @kind font */
  --type-metric:var(--fw-light) var(--fs-h1)/1.1 var(--font-display); /* @kind font */
}

:root{
  --space-0:0; /* @kind spacing */
  --space-1:2px; /* @kind spacing */
  --space-2:4px; /* @kind spacing */
  --space-3:6px; /* @kind spacing */
  --space-4:8px; /* @kind spacing */
  --space-5:12px; /* @kind spacing */
  --space-6:16px; /* @kind spacing */
  --space-7:20px; /* @kind spacing */
  --space-8:24px; /* @kind spacing */
  --space-9:32px; /* @kind spacing */
  --space-10:40px; /* @kind spacing */
  --space-11:48px; /* @kind spacing */
  --space-12:64px; /* @kind spacing */
  --space-13:80px; /* @kind spacing */
  --space-14:96px; /* @kind spacing */
  --space-15:128px; /* @kind spacing */

  --gap-inline:8px; /* @kind spacing */      /* icon → label */
  --gap-control:12px; /* @kind spacing */    /* button groups, chips */
  --gap-card:24px; /* @kind spacing */       /* card grids */
  --gap-section:72px; /* @kind spacing */    /* marketing section rhythm */

  --pad-card:24px; /* @kind spacing */
  --pad-card-lg:32px; /* @kind spacing */
  --pad-panel:16px; /* @kind spacing */
  --pad-row:12px; /* @kind spacing */

  --page-max:1240px; /* @kind spacing */
  --page-gutter:48px; /* @kind spacing */
  --nav-height:64px; /* @kind spacing */
  --sidebar-width:220px; /* @kind spacing */
  --panel-header-height:44px; /* @kind spacing */
}

:root{
  --radius-none:0;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-pill:999px;   /* all CTAs are pills */
  --radius-card:14px;
  --radius-panel:10px;
  --radius-control:8px;
  --radius-chip:6px;
}

:root{
  /* Elevation — dark UI, so shadow reads as depth-of-field, never as light */
  --shadow-none:none; /* @kind shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,.6); /* @kind shadow */
  --shadow-md:0 8px 24px rgba(0,0,0,.55); /* @kind shadow */
  --shadow-lg:0 24px 64px rgba(0,0,0,.65); /* @kind shadow */
  --shadow-panel:0 2px 0 rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5); /* @kind shadow */

  /* Inner light — glass edge on cards and inputs */
  --inset-hairline:inset 0 1px 0 rgba(244,244,245,.06); /* @kind shadow */
  --inset-input:inset 0 1px 2px rgba(0,0,0,.55); /* @kind shadow */

  /* Brand glows — the signature effect */
  --glow-teal-sm:0 0 12px rgba(31,228,204,.35); /* @kind shadow */
  --glow-teal:0 0 24px rgba(31,228,204,.28),0 0 2px rgba(31,228,204,.55); /* @kind shadow */
  --glow-teal-lg:0 0 48px rgba(31,228,204,.35),0 0 120px rgba(31,228,204,.18); /* @kind shadow */
  --glow-violet:0 0 28px rgba(195,75,255,.32); /* @kind shadow */
  --glow-blue:0 0 28px rgba(46,108,255,.32); /* @kind shadow */
  --glow-card:0 0 0 1px rgba(31,228,204,.28),0 0 32px rgba(31,228,204,.14),0 24px 64px rgba(0,0,0,.6); /* @kind shadow */
  --glow-focus:0 0 0 2px rgba(31,228,204,.55),0 0 18px rgba(31,228,204,.3); /* @kind shadow */
  --glow-text-teal:0 0 18px rgba(31,228,204,.45); /* @kind shadow */

  /* Ambient background washes */
  --wash-teal:radial-gradient(60% 60% at 50% 45%,rgba(31,228,204,.16) 0%,rgba(5,5,7,0) 70%); /* @kind color */
  --wash-violet:radial-gradient(50% 50% at 70% 20%,rgba(195,75,255,.18) 0%,rgba(5,5,7,0) 70%); /* @kind color */
  --wash-blue:radial-gradient(55% 55% at 20% 30%,rgba(46,108,255,.16) 0%,rgba(5,5,7,0) 70%); /* @kind color */
  --grid-line:rgba(31,228,204,.05); /* @kind color */
  --pattern-grid:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); /* @kind color */
  --pattern-grid-size:48px 48px; /* @kind other */

  /* Glass */
  --blur-glass:blur(14px); /* @kind other */
  --blur-nav:blur(20px); /* @kind other */
  --blur-modal:blur(28px); /* @kind other */
  --scrim-modal:rgba(5,5,7,.72); /* @kind color */
}

:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
  --dur-ambient:6s; /* @kind other */      /* glow breathing, orbit rotation */

  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-linear:linear; /* @kind other */  /* tickers, rotations */

  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-surface:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); /* @kind other */
  --press-scale:.985; /* @kind other */
}

@keyframes lbSoonPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.1);opacity:0}100%{transform:scale(2.1);opacity:0}}

@keyframes lbStepPulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}

@keyframes lbBarPulse{0%{opacity:.78}50%{opacity:1}100%{opacity:.78}}

@keyframes lbDrawLine{0%{stroke-dashoffset:300}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes lbDrawTip{0%,45%{opacity:0}62%{opacity:1}100%{opacity:1}}

@keyframes lbFundFill{from{width:0}}
@keyframes lbFundKnob{from{left:0}}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
::selection{background:rgba(31,228,204,.28);color:var(--soft-white)}
:focus-visible{outline:none;box-shadow:var(--glow-focus)}