/* ============================================================
   Design tokens — Tellmachines
   Own palette on the media21 token architecture: deep petrol
   night ground, cyan→violet "analog→digital" gradient, light
   cyan-tinted page background.
   ============================================================ */
:root {
  /* Color */
  --c-bg:           #F4F9FB;   /* light cyan-tinted page */
  --c-bg-2:         #E9F1F6;   /* deeper tint for alternate sections */
  --c-surface:      #FFFFFF;   /* cards */
  --c-ink:          #132029;   /* primary text — dark petrol slate */
  --c-ink-soft:     #31434F;
  --c-muted:        #566B78;   /* secondary text */
  --c-primary:      #083D52;   /* brand deep petrol */
  --c-primary-deep: #041D2B;   /* near-black petrol (footer, hero) */
  --c-primary-soft: #DEEDF4;
  --c-accent:       #0C7792;   /* petrol-cyan, AA on white */
  --c-accent-deep:  #095E74;
  --c-accent-soft:  #BFE8F2;   /* eyebrows / accents on dark ground */
  --c-accent-bright:#37D3F0;   /* gradients, glows on dark ground */
  --c-violet:       #8F6CF0;   /* "digital" support color */
  --c-line:         #D9E4EC;   /* hairlines */
  --c-line-dark:    rgba(255,255,255,.16);
  --c-focus:        #095E74;

  /* Gradients — analog (cyan) → digital (violet) */
  --grad-brand: linear-gradient(120deg,#37D3F0 0%,#5FA4F5 45%,#8F6CF0 100%);
  --grad-deep:  linear-gradient(160deg,#041D2B 0%,#083D52 55%,#0A6D86 120%);

  /* Typography — Mulish (self-hosted) */
  --font-sans:    "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (min 320px → max ~1180px) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.0625rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.55rem + 1.25vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.80rem + 2.00vw, 3.60rem);
  --step-5:  clamp(2.60rem, 1.90rem + 3.40vw, 4.60rem);

  /* Spacing scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Radius */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;

  /* Shadow (soft, petrol-tinted) */
  --sh-1: 0 1px 2px rgba(4,29,43,.05), 0 6px 18px rgba(4,29,43,.07);
  --sh-2: 0 12px 44px rgba(4,29,43,.16);
  --sh-glow: 0 10px 40px rgba(55,211,240,.30);

  /* Layout */
  --w-page: 1180px;
  --w-text: 66ch;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .18s;
  --t-med: .35s;
  --t-slow: .8s;
}