@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&display=swap');
/* =====================================================================
   VarCentral shared design system  (/varcentral-ds.css)
   Linked by the marketing site AND the in-browser app editions.
   All names are prefixed vc- / --vc- so they never collide with page CSS.
   No global resets: nothing here styles bare elements except .vc-root.

   TOKENS (:root)
   Color:   --vc-bg --vc-bg-2 (page bg, nocturnal emerald) | --vc-panel / --vc-panel-2 (glass surface)
            --vc-panel-brd (hairline border) | --vc-fg (text) --vc-muted --vc-faint (secondary text)
            --vc-accent (mint #36e2a0) --vc-accent-2 (emerald #12603f) --vc-gold (#e9c37a)
            --vc-emerald / --vc-mint (aliases of accent-2 / accent) | --vc-pos --vc-neg --vc-warn (status)
            --vc-on-accent (text on mint) | --vc-accent-soft --vc-accent-glow --vc-gold-soft (tints)
            --vc-grad-primary (button gradient) --vc-grad-brand (logo-mark gradient)
   Space:   --vc-space-1..6 (4,8,12,16,24,40px) --vc-space-7 --vc-space-8 (64,96px)
   Radius:  --vc-radius (18) --vc-radius-sm (11) --vc-radius-md (14) --vc-radius-lg (28) --vc-radius-pill
   Border:  --vc-border (1px solid panel-brd) --vc-border-accent (1px solid mint-tint)
   Shadow:  --vc-shadow-sm --vc-shadow-md --vc-shadow-lg --vc-shadow-glow --vc-shadow-gold
   Fonts:   --vc-font-sans (Manrope) --vc-font-serif (Instrument Serif) --vc-font-mono (DM Mono)
   Sizes:   --vc-fs-xs .72 --vc-fs-sm .88 --vc-fs-base 1rem --vc-fs-md 1.12 --vc-fs-lg 1.4
            --vc-fs-xl 2 --vc-fs-2xl 3.2 --vc-fs-3xl 5 (rem; xl+ are clamp()ed)
   Motion:  --vc-ease --vc-dur-fast (.25s) --vc-dur (.3s) --vc-dur-slow (.4s)
            --vc-transition (common multi-property button/card transition)
   Layout:  --vc-maxw (1180px) --vc-focus (focus ring color)

   COMPONENTS
   .vc-root        opt-in base: bg, fg, sans font, color-scheme dark (put on <body> or app root)
   .vc-btn         pill button base (lifts on hover)
     .vc-btn-primary  mint gradient CTA     .vc-btn-ghost  glass outline button
     .vc-btn-sm       compact size          .vc-btn-block  full width
   .vc-card        glass panel; hover lift + border glow (.vc-card-flat disables lift)
   .vc-field       label + control wrapper (grid)   .vc-label  field label (mono)
   .vc-input       text input / select / textarea (also .vc-select, .vc-textarea)
   .vc-table       data table (wrap in .vc-table-wrap for scroll + rounded border)
     .vc-num       right-aligned mono numerals     .vc-pos/.vc-neg  green/red amounts
   .vc-badge       pill label (.vc-badge-gold, .vc-badge-pos, .vc-badge-neg, .vc-badge-muted)
   .vc-h1 .vc-h2 .vc-h3   serif display headings (h3 sans bold)
   .vc-eyebrow     mint mono uppercase kicker      .vc-mono  DM Mono text
   .vc-lead .vc-muted .vc-faint   text helpers     .vc-serif  display serif text
   .vc-wrap        centered max-width container    .vc-divider  hairline rule
   .vc-msg (+ .vc-msg-err/.vc-msg-ok)  inline form message
   ===================================================================== */

:root{
  /* color — VarCentral brand: navy #0a1e32 + teal #058c99 (from the logo) */
  --vc-bg:#06121c; --vc-bg-2:#0a1e32;
  --vc-panel:rgba(255,255,255,.04); --vc-panel-2:rgba(255,255,255,.07);
  --vc-panel-brd:rgba(255,255,255,.10);
  --vc-fg:#eaf2f7; --vc-muted:#9fb3c2; --vc-faint:#6f8698;
  --vc-accent:#22c3d6; --vc-accent-2:#058c99; --vc-gold:#5fd3e0;
  --vc-mint:var(--vc-accent); --vc-emerald:var(--vc-accent-2);
  --vc-pos:#3ecf8e; --vc-neg:#ff8a8a; --vc-warn:#e9c37a;
  --vc-on-accent:#04161f;
  --vc-accent-soft:rgba(34,195,214,.14); --vc-accent-glow:rgba(34,195,214,.35);
  --vc-gold-soft:rgba(95,211,224,.45);
  --vc-grad-primary:linear-gradient(180deg,#3ad6e6,#0a8fa0);
  --vc-grad-brand:linear-gradient(145deg,#22c3d6,#0a1e32);
  /* space */
  --vc-space-1:4px; --vc-space-2:8px; --vc-space-3:12px; --vc-space-4:16px;
  --vc-space-5:24px; --vc-space-6:40px; --vc-space-7:64px; --vc-space-8:96px;
  /* radius */
  --vc-radius:18px; --vc-radius-sm:11px; --vc-radius-md:14px; --vc-radius-lg:28px; --vc-radius-pill:999px;
  /* border */
  --vc-border:1px solid var(--vc-panel-brd);
  --vc-border-accent:1px solid rgba(34,195,214,.35);
  /* shadow */
  --vc-shadow-sm:0 10px 30px -10px rgba(34,195,214,.55);
  --vc-shadow-md:0 16px 40px -12px rgba(34,195,214,.7);
  --vc-shadow-lg:0 50px 100px -30px rgba(0,0,0,.8);
  --vc-shadow-glow:0 0 0 1px rgba(34,195,214,.2),0 0 48px rgba(34,195,214,.25);
  --vc-shadow-gold:0 30px 70px -40px rgba(95,211,224,.4);
  /* fonts */
  --vc-font-sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --vc-font-serif:"Instrument Serif",Georgia,serif;
  --vc-font-mono:"DM Mono",ui-monospace,Menlo,monospace;
  /* sizes */
  --vc-fs-xs:.72rem; --vc-fs-sm:.88rem; --vc-fs-base:1rem; --vc-fs-md:1.12rem; --vc-fs-lg:1.4rem;
  --vc-fs-xl:clamp(1.6rem,3vw,2rem); --vc-fs-2xl:clamp(2rem,4.4vw,3.2rem); --vc-fs-3xl:clamp(2.6rem,6.4vw,5rem);
  /* motion */
  --vc-ease:cubic-bezier(.22,.61,.36,1);
  --vc-dur-fast:.25s; --vc-dur:.3s; --vc-dur-slow:.4s;
  --vc-transition:transform var(--vc-dur) var(--vc-ease),box-shadow var(--vc-dur) var(--vc-ease),background var(--vc-dur) var(--vc-ease),border-color var(--vc-dur) var(--vc-ease);
  /* layout */
  --vc-maxw:1180px; --vc-focus:#22c3d6;
}

/* ---- base (opt-in) ---- */
.vc-root{
  background:linear-gradient(180deg,var(--vc-bg),var(--vc-bg-2));color:var(--vc-fg);
  font-family:var(--vc-font-sans);line-height:1.6;color-scheme:dark;-webkit-font-smoothing:antialiased;
}
.vc-wrap{width:100%;max-width:var(--vc-maxw);margin-inline:auto;padding-inline:20px}
.vc-divider{border:0;border-top:var(--vc-border);margin:var(--vc-space-5) 0}
:where([class*="vc-"]):focus-visible{outline:2px solid var(--vc-focus);outline-offset:3px;border-radius:6px}

/* ---- typography ---- */
.vc-serif{font-family:var(--vc-font-serif);font-weight:400;letter-spacing:0}
.vc-h1,.vc-h2{font-family:var(--vc-font-serif);font-weight:400;letter-spacing:-.01em;line-height:1.05;margin:0;text-wrap:balance}
.vc-h1{font-size:var(--vc-fs-3xl);line-height:1.02}
.vc-h2{font-size:var(--vc-fs-2xl)}
.vc-h3{font-family:var(--vc-font-sans);font-weight:700;font-size:var(--vc-fs-md);letter-spacing:-.02em;line-height:1.2;margin:0}
.vc-eyebrow{font-family:var(--vc-font-mono);font-size:var(--vc-fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--vc-accent);display:inline-block}
.vc-mono{font-family:var(--vc-font-mono)}
.vc-lead{color:var(--vc-muted);font-size:clamp(1.02rem,1.7vw,1.22rem)}
.vc-muted{color:var(--vc-muted)} .vc-faint{color:var(--vc-faint)}

/* ---- buttons ---- */
.vc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--vc-font-sans);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;
  padding:.82em 1.5em;border-radius:var(--vc-radius-pill);border:1px solid transparent;
  background:transparent;color:var(--vc-fg);
  transition:var(--vc-transition);will-change:transform}
.vc-btn:hover{transform:translateY(-2px)}
.vc-btn:disabled,.vc-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.vc-btn-primary{background:var(--vc-grad-primary);color:var(--vc-on-accent);box-shadow:var(--vc-shadow-sm)}
.vc-btn-primary:hover{box-shadow:var(--vc-shadow-md)}
.vc-btn-ghost{background:var(--vc-panel);border-color:var(--vc-panel-brd);color:var(--vc-fg);backdrop-filter:blur(8px)}
.vc-btn-ghost:hover{border-color:rgba(34,195,214,.5)}
.vc-btn-sm{padding:.6em 1.1em;font-size:.88rem}
.vc-btn-block{width:100%}

/* ---- card ---- */
.vc-card{position:relative;padding:1.5rem;border-radius:var(--vc-radius);
  background:var(--vc-panel);border:var(--vc-border);overflow:hidden;color:var(--vc-fg);
  transition:transform var(--vc-dur-slow) var(--vc-ease),border-color var(--vc-dur-slow),background var(--vc-dur-slow)}
.vc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),var(--vc-accent-soft),transparent 60%);
  opacity:0;transition:opacity var(--vc-dur-slow)}
.vc-card:hover{transform:translateY(-4px);border-color:var(--vc-accent-glow)}
.vc-card:hover::before{opacity:1}
.vc-card-flat:hover{transform:none}

/* ---- forms ---- */
.vc-field{display:grid;gap:.35rem;margin-bottom:.9rem}
.vc-label,.vc-field>label{font-size:.78rem;color:var(--vc-muted);font-family:var(--vc-font-mono);letter-spacing:.04em}
.vc-input,.vc-select,.vc-textarea,.vc-field input,.vc-field select,.vc-field textarea{
  width:100%;padding:.8rem .9rem;border-radius:var(--vc-radius-sm);border:var(--vc-border);
  background:rgba(0,0,0,.3);color:var(--vc-fg);font-size:1rem;font-family:var(--vc-font-sans);
  transition:border-color var(--vc-dur-fast),box-shadow var(--vc-dur-fast)}
.vc-input::placeholder,.vc-textarea::placeholder{color:var(--vc-faint)}
.vc-input:focus,.vc-select:focus,.vc-textarea:focus,.vc-field input:focus,.vc-field select:focus,.vc-field textarea:focus{
  outline:none;border-color:var(--vc-accent);box-shadow:0 0 0 3px var(--vc-accent-soft)}
.vc-textarea{resize:vertical;min-height:90px}
.vc-msg{min-height:20px;font-size:.85rem}
.vc-msg-err{color:var(--vc-neg)} .vc-msg-ok{color:var(--vc-accent)}

/* ---- table ---- */
.vc-table-wrap{overflow-x:auto;border:var(--vc-border);border-radius:var(--vc-radius)}
.vc-table{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--vc-fg)}
.vc-table caption{text-align:left;padding:1rem 1.2rem;color:var(--vc-faint);font-family:var(--vc-font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.vc-table th,.vc-table td{padding:.8rem 1.2rem;text-align:left;border-top:var(--vc-border)}
.vc-table thead th{color:var(--vc-muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;border-top:0}
.vc-table tbody tr{transition:background var(--vc-dur-fast)}
.vc-table tbody tr:hover{background:var(--vc-panel)}
.vc-table tbody th{font-weight:500}
.vc-num{text-align:right;font-family:var(--vc-font-mono);font-variant-numeric:tabular-nums}
.vc-pos{color:var(--vc-pos)} .vc-neg{color:var(--vc-neg)}

/* ---- badge ---- */
.vc-badge{display:inline-flex;align-items:center;gap:.35em;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:.35em .9em;border-radius:var(--vc-radius-pill);background:var(--vc-accent-soft);color:var(--vc-accent);border:1px solid rgba(34,195,214,.3)}
.vc-badge-gold{background:linear-gradient(180deg,var(--vc-gold),#c79a4d);color:#241803;border-color:transparent}
.vc-badge-pos{background:var(--vc-accent-soft);color:var(--vc-pos)}
.vc-badge-neg{background:rgba(255,138,138,.12);color:var(--vc-neg);border-color:rgba(255,138,138,.3)}
.vc-badge-muted{background:var(--vc-panel);color:var(--vc-muted);border-color:var(--vc-panel-brd)}

@media (prefers-reduced-motion:reduce){
  .vc-btn,.vc-card{transition:none}
  .vc-btn:hover,.vc-card:hover{transform:none}
}