/* ============================================================
   Design tokens — media21
   Palette derived from the original site: brand navy #00006F
   (wordmark), periwinkle #6A73DA (hero accent), light blue page
   background #F5FAFD, dark cinematic hero.
   ============================================================ */
:root {
  /* Color */
  --c-bg:           #F5FAFD;   /* light blue-tinted page */
  --c-bg-2:         #EAF1F9;   /* deeper tint for alternate sections */
  --c-surface:      #FFFFFF;   /* cards */
  --c-ink:          #1C2340;   /* primary text — dark navy slate */
  --c-ink-soft:     #39415C;
  --c-muted:        #59627A;   /* secondary text */
  --c-primary:      #00006F;   /* media21 brand navy */
  --c-primary-deep: #060A38;   /* near-black navy (footer, hero) */
  --c-primary-soft: #E4E9FA;
  --c-accent:       #4F57C8;   /* periwinkle, darkened for AA contrast */
  --c-accent-deep:  #3B42A8;
  --c-accent-soft:  #C9CFFF;   /* eyebrows / accents on dark ground */
  --c-accent-bright:#8A93FF;   /* gradients, glows on dark ground */
  --c-cyan:         #4EC9E8;   /* aurora support color */
  --c-line:         #DCE5F1;   /* hairlines */
  --c-line-dark:    rgba(255,255,255,.16);
  --c-focus:        #3B42A8;

  /* Gradients */
  --grad-brand: linear-gradient(120deg,#6A73DA 0%,#8A93FF 45%,#4EC9E8 100%);
  --grad-deep:  linear-gradient(160deg,#060A38 0%,#00006F 55%,#3B42A8 120%);

  /* Typography — Mulish throughout (as on the original site) */
  --font-serif:   "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --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, blue-tinted) */
  --sh-1: 0 1px 2px rgba(6,10,56,.05), 0 6px 18px rgba(6,10,56,.07);
  --sh-2: 0 12px 44px rgba(6,10,56,.16);
  --sh-glow: 0 10px 40px rgba(106,115,218,.35);

  /* 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;
}