/* ============================================================
   Frontiers Research Hub — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Colour: canvas & surfaces ---- */
  --c-bg:            #06090F;   /* base background */
  --c-bg-deep:       #0A0E16;   /* deepening section background */
  --c-panel:         #0F1520;   /* elevated panels & cards */
  --c-panel-2:       #121A28;   /* slightly raised sub-panel */
  --c-hairline:      rgba(255, 255, 255, 0.06);  /* 1px card border */
  --c-hairline-2:    rgba(255, 255, 255, 0.10);  /* stronger divider */

  /* ---- Colour: accents ---- */
  --c-cyan:          #22D3EE;   /* primary glow / accent */
  --c-indigo:        #6366F1;   /* secondary accent */
  --c-green:         #34D399;   /* live/data indicators ONLY */

  --c-cyan-soft:     rgba(34, 211, 238, 0.14);
  --c-indigo-soft:   rgba(99, 102, 241, 0.14);

  /* ---- Colour: text ---- */
  --c-text:          #E6EDF3;   /* primary */
  --c-muted:         #94A3B8;   /* muted */
  --c-faint:         #64748B;   /* faint / metadata */

  /* ---- Signature gradient (used sparingly) ---- */
  --grad-signature:  linear-gradient(100deg, #22D3EE 0%, #6366F1 100%);
  --grad-signature-soft: linear-gradient(100deg, rgba(34,211,238,0.9) 0%, rgba(99,102,241,0.9) 100%);
  --grad-text:       linear-gradient(100deg, #7EE9FB 0%, #A5A9FF 100%);

  /* ---- Glows ---- */
  --glow-cyan:       0 0 40px rgba(34, 211, 238, 0.25);
  --glow-indigo:     0 0 40px rgba(99, 102, 241, 0.25);
  --glow-inner:      inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---- Typography: families ---- */
  --font-display: "Space Grotesk", "Clash Display", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* ---- Typography: fluid scale (clamp: min, fluid, max) ---- */
  --fs-display:  clamp(2.75rem, 6.5vw, 5.5rem);   /* hero */
  --fs-h1:       clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2:       clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3:       clamp(1.35rem, 2vw, 1.75rem);
  --fs-h4:       1.25rem;
  --fs-lead:     clamp(1.05rem, 1.4vw, 1.3rem);   /* supporting line */
  --fs-body:     1rem;
  --fs-sm:       0.9375rem;
  --fs-eyebrow:  0.78rem;    /* mono eyebrow */
  --fs-meta:     0.72rem;    /* mono metadata */

  /* ---- Typography: weights & tracking ---- */
  --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.18em;   /* mono eyebrows / labels */
  --track-wider:  0.24em;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  /* ---- Spacing scale (8px base) ---- */
  --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;    --s-11: 10rem;

  --section-pad-y: clamp(4rem, 9vw, 8rem);

  /* ---- Layout ---- */
  --maxw:      1280px;
  --maxw-text: 68ch;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radii ---- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-soft:  0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-card:  0 8px 30px -12px rgba(0, 0, 0, 0.6);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  0.2s;
  --dur-med:   0.45s;
  --dur-slow:  0.8s;

  /* ---- Z ---- */
  --z-nav: 100; --z-overlay: 200; --z-modal: 300;

  /* ---- Nav backdrop ---- */
  --nav-bg: rgba(6, 9, 15, 0.72);
  --menu-bg: rgba(6, 9, 15, 0.97);
}