/* =============================================================
   BioDevs – Design tokens
   Light / clinical theme. Single source of truth for colors,
   typography, spacing, radii, shadows and motion.
   ============================================================= */

:root {
  /* ---- Brand palette ---- */
  --c-teal-600: #0e7490;   /* "bio"  */
  --c-teal-500: #0891b2;
  --c-blue-600: #2563eb;   /* "devs" */
  --c-blue-500: #3b82f6;
  --c-cyan-400: #22d3ee;

  --brand-gradient: linear-gradient(100deg, var(--c-teal-600) 0%, var(--c-blue-600) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(8,145,178,.10), rgba(37,99,235,.10));

  /* ---- Neutrals (clinical, lots of white) ---- */
  --c-ink:        #0d1b2a;  /* near-black navy, headings  */
  --c-body:       #36485a;  /* body text                  */
  --c-muted:      #6b7c8d;  /* secondary text             */
  --c-line:       #e4ebf1;  /* hairline borders           */
  --c-surface:    #f6f9fb;  /* alt section background     */
  --c-surface-2:  #eef4f8;
  --c-bg:         #ffffff;
  --c-white:      #ffffff;

  /* ---- Typography ---- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --fs-hero:   clamp(2.6rem, 6vw, 4.6rem);
  --fs-h2:     clamp(1.9rem, 3.5vw, 2.8rem);
  --fs-h3:     clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  .875rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.65;

  /* ---- Layout ---- */
  --maxw:       1200px;
  --maxw-text:  720px;
  --gutter:     clamp(1.2rem, 4vw, 3rem);
  --header-h:   72px;

  /* ---- Spacing scale ---- */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;   --sp-5: 3rem;   --sp-6: 4rem;
  --sp-7: 6rem;   --sp-8: 8rem;

  /* ---- Radii & shadows ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(13,27,42,.06), 0 2px 8px rgba(13,27,42,.05);
  --sh-md: 0 6px 24px rgba(13,27,42,.08);
  --sh-lg: 0 18px 50px rgba(13,27,42,.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .5s;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}