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

/* ============================================================
   QuGradient · design tokens
   Commercial spin-off of QuMatrix. Shares the QuMatrix identity:
   navy-dominant, Quantum Cyan accent, Space Grotesk display.
   Light-first body with dark navy hero / product / footer bands,
   matching site/ (QuMatrix). Variable NAMES are preserved from
   the previous purple theme so components recolor in place.
   ============================================================ */

:root {
  /* --- QuMatrix core palette -------------------------------- */
  --navy:        #0A1F44;  /* QuMatrix Navy — the dominant */
  --cyan:        #00D9FF;  /* Quantum Cyan — primary accent */
  --teal:        #00B8A9;  /* Science Teal — secondary accent */
  --purple:      #5B47A8;  /* Research Purple — research/capabilities only */

  /* navy ramp for layering on dark sections */
  --navy-950:    #050E22;
  --navy-900:    #071732;
  --navy-800:    #0A1F44;
  --navy-700:    #112a55;
  --navy-600:    #1b3a6e;
  --navy-500:    #294b85;

  /* accent tints / hairlines */
  --cyan-soft:   #6fe9ff;
  --cyan-12:     rgba(0, 217, 255, 0.12);
  --cyan-20:     rgba(0, 217, 255, 0.20);
  --teal-12:     rgba(0, 184, 169, 0.12);
  --purple-14:   rgba(91, 71, 168, 0.14);

  /* --- brand aliases (names kept from prior theme) ---------- */
  --brand:    #00D9FF;  /* primary accent → cyan */
  --brand-2:  #00D9FF;  /* on-dark links / gradient end → cyan */
  --brand-3:  #00B8A9;  /* secondary accent → teal */
  --brand-ink:#0B7C70;  /* readable teal for links + eyebrows on light */

  /* signature gradient — teal → cyan (bright on navy) */
  --grad:      linear-gradient(118deg, var(--teal) 0%, var(--cyan) 100%);
  --grad-rev:  linear-gradient(118deg, var(--cyan) 0%, var(--teal) 100%);
  --grad-soft: linear-gradient(118deg, rgba(0,184,169,0.12), rgba(0,217,255,0.12));
  /* darker variant for gradient text on LIGHT headings (readable) */
  --grad-ink:  linear-gradient(118deg, #0A1F44 0%, #0B7C70 46%, #00B8A9 100%);

  --brand-08:  rgba(0, 217, 255, 0.08);
  --brand-12:  rgba(0, 217, 255, 0.12);
  --brand-20:  rgba(0, 217, 255, 0.22);

  /* --- ink / neutrals (light-first) ------------------------- */
  --ink:        #0A1F44;  /* headings on light — navy */
  --ink-soft:   #1A2238;  /* body text on light */
  --muted:      #6B7280;  /* captions, metadata */
  --bg:         #FFFFFF;
  --soft:       #F4F6FB;  /* cool light section band / card fill */
  --soft-2:     #EAEEF6;
  --border:     #D9DEEA;
  --border-soft:#E6E9F2;
  --white:      #FFFFFF;

  /* --- dark navy band surfaces (hero / product / footer) ---- */
  --dark:       #0A1F44;  /* navy */
  --dark-2:     #071732;
  --on-dark-ink:    rgba(255,255,255,0.64);
  --on-dark-muted:  rgba(255,255,255,0.46);
  --white-08:   rgba(255,255,255,0.08);
  --white-14:   rgba(255,255,255,0.14);
  --white-64:   rgba(255,255,255,0.64);
  --white-46:   rgba(255,255,255,0.46);

  /* --- semantic -------------------------------------------- */
  --surface:    var(--soft);
  --rule:       var(--border);
  --ink-muted:  var(--muted);

  /* --- type families --------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "IBM Plex Mono",
                  "DejaVu Sans Mono", "Ubuntu Mono", Menlo, monospace;

  /* --- type scale (fluid, mobile-first; matches QuMatrix) --- */
  --fs-display: clamp(2.6rem, 1.7rem + 4.0vw, 4.6rem);
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --fs-h2:      clamp(1.85rem, 1.3rem + 2.2vw, 2.7rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1.0vw, 1.6rem);
  --fs-h4:      clamp(1.1rem, 1.0rem + 0.4vw, 1.25rem);
  --fs-stat:    clamp(2.6rem, 1.6rem + 4.0vw, 4rem);
  --fs-lead:    clamp(1.12rem, 1.0rem + 0.7vw, 1.35rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */
  --fs-label:   0.8125rem;

  --lh-tight:   1.04;
  --lh-snug:    1.2;
  --lh-body:    1.62;
  --tracking-label: 0.14em;

  /* --- space scale (8pt-ish; matches QuMatrix) ------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* --- radius / elevation / motion ------------------------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,31,68,0.05), 0 1px 3px rgba(10,31,68,0.07);
  --shadow-md: 0 6px 18px rgba(10,31,68,0.08), 0 14px 40px rgba(10,31,68,0.10);
  --shadow-lg: 0 24px 60px rgba(10,31,68,0.16);
  --shadow-brand: 0 10px 30px rgba(0,217,255,0.26);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
}