/* ============================================================
   Contrology Connection — Design Tokens
   Premium, calm, movement-forward wellness editorial.
   Brand sea-teal (from the wave mark) + warm clay for achievement.
   ============================================================ */
:root{
  /* ---- Surfaces ---- */
  --bone:#F7F4EF;        /* page background (warm off-white) */
  --surface:#FFFFFF;     /* cards, panels */
  --surface-2:#FBF9F5;   /* alt fills, quiet sections */
  --ink:#1B2A29;         /* primary text — deep charcoal-teal */
  --ink-soft:#46534F;    /* secondary text */
  --muted:#7A746B;       /* tertiary / captions */
  --line:#E7E0D6;        /* hairline borders */
  --line-strong:#D8CFC1;

  /* ---- Brand: sea-teal ---- */
  --sea:#2E6F6B;
  --sea-deep:#22534F;    /* hover / pressed */
  --sea-soft:#E2EDEA;    /* tinted surface */
  --sea-mist:#EFF5F3;

  /* ---- Accent: clay (warmth, achievement, certificates) ---- */
  --clay:#C2724E;
  --clay-deep:#A85C3B;
  --clay-soft:#F4E6DC;

  /* ---- Feedback ---- */
  --good:#3E7C5A;
  --bad:#C0492F;
  --on-dark:#F4F1EB;

  /* ---- Type ---- */
  --serif:"Fraunces", "Hoefler Text", Georgia, serif;   /* display / headings */
  --sans:"Public Sans", system-ui, -apple-system, sans-serif; /* body / UI */
  --mono:"Consolas", ui-monospace, "SF Mono", Menlo, monospace; /* labels */

  /* type scale (fluid where useful) */
  --t-display:clamp(2.6rem, 5.2vw, 4.4rem);
  --t-h1:clamp(2.1rem, 3.6vw, 3rem);
  --t-h2:clamp(1.6rem, 2.4vw, 2.1rem);
  --t-h3:1.3rem;
  --t-body:1.0625rem;     /* 17px */
  --t-small:0.9375rem;    /* 15px */
  --t-label:0.6875rem;    /* 11px mono labels */

  /* ---- Spacing scale (8pt) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- Radii ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* ---- Elevation ---- */
  --sh-1:0 1px 2px rgba(27,42,41,.04), 0 2px 6px rgba(27,42,41,.05);
  --sh-2:0 8px 24px -12px rgba(27,42,41,.18);
  --sh-3:0 26px 60px -28px rgba(27,42,41,.32);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.18s; --t-mid:.32s; --t-slow:.6s;

  --wrap:1200px;
  --wrap-narrow:760px;
}