/* Official wikiflow international brand tokens — the single re-skin point.
   Change only this block to re-skin the whole site. No colour is
   hardcoded anywhere else in the CSS. */
:root{
  /* ---- Official wikiflow brand tokens (re-skin point) ---- */
  --canvas:#F6F6F6;      /* main / off-white */
  --paper:#FFFFFF;
  --line:#D6D6DD;        /* main / light grey */
  --line-soft:rgba(35,31,32,.10);
  --ink:#231F20;         /* logo black — headings */
  --body:#505154;        /* main / charcoal — body */
  --muted:#6A6B6F;       /* derived: charcoal at AA on canvas */
  --navy:#365568;        /* accent — primary */
  --steel:#7F9EAC;       /* accent */
  --gold:#E8A94C;        /* accent — warm highlight */
  --terra:#D8603D;       /* accent */
  --red:#B9575B;         /* main */
  --red-deep:#9D3E42;    /* main */
  --navy-deep:#2A4252;

  /* Type — Hanken Grotesk (display + body) with IBM Plex Mono for the small
     technical labels/eyebrows. --font stays as a body alias for back-compat. */
  --font-display:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --font:var(--font-body);
  --maxw:1200px;
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(72px,11vw,132px);

  /* ========================================================================
     Craft system — motion, depth, rhythm, texture. No new base hues: every
     colour below is an alpha/tint of the frozen palette above.
     ======================================================================== */

  /* Motion — one confident settle, plus longer travels. Ease-out throughout,
     the way Linear stages its intros. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:.2s; --dur-2:.4s; --dur-3:.85s; --dur-4:1.3s;

  /* 8px spacing rhythm. */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  /* Fluid type scale — dominance through size, precise line-height/tracking. */
  --fs-display:clamp(46px,8.2vw,108px);
  --fs-h1:clamp(40px,6.4vw,74px);
  --fs-h2:clamp(32px,4.6vw,58px);
  --fs-h3:clamp(21px,2.2vw,28px);
  --fs-lede:clamp(19px,2vw,24px);
  --lh-display:.98;
  --lh-head:1.04;
  --track-display:-.03em;
  --track-head:-.02em;
  --track-eyebrow:.22em;

  /* Shape — softer, more modern radii. */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* Elevation — imperceptible at rest, layered so it reads as real light
     diffusion; lifts confidently on interaction. */
  --e-1:0 1px 2px rgba(35,31,32,.03), 0 4px 12px -6px rgba(35,31,32,.08);
  --e-2:0 2px 6px -2px rgba(35,31,32,.05), 0 16px 36px -18px rgba(35,31,32,.16);
  --e-3:0 6px 18px -6px rgba(35,31,32,.08), 0 40px 80px -32px rgba(35,31,32,.24);
  --e-navy:0 30px 70px -34px rgba(54,85,104,.6);
  --ring:0 0 0 1px rgba(35,31,32,.06);   /* faint hairline that survives glass */

  /* Frosted glass — Apple-grade: translucent tint, deep blur, a touch of
     saturation so colour behind the glass reads richer, hairline light edge.
     Header rides translucent over the light hero, then frosts up once scrolled
     so the dark bands behind never drop the nav links below AA. */
  --glass:rgba(246,246,246,.62);
  --glass-scrolled:rgba(246,246,246,.86);
  --glass-strong:rgba(255,255,255,.58);
  --glass-card:rgba(255,255,255,.55);      /* light content cards — frost the field behind */
  --glass-border:rgba(255,255,255,.55);
  --glass-blur:24px;
  --glass-sat:saturate(1.7);

  /* Mono button + neutral elevation wash. The ink theme re-points these; they
     were previously defined ONLY there, so in the light theme .nav-cta resolved
     to an invalid background/colour and every var(--mono-wash) hover was a
     no-op. Same rule as the ink theme: type-colour fill, surface-colour text. */
  --btn-fill:var(--ink);
  --btn-text:var(--canvas);
  --mono-wash:rgba(35,31,32,.04);

  /* Accent washes + gradients (alpha of accents; navy/steel/gold only). */
  --navy-wash:rgba(54,85,104,.09);
  --steel-wash:rgba(127,158,172,.14);
  --gold-wash:rgba(232,169,76,.16);
  --grad-ink:linear-gradient(120deg,var(--navy),var(--navy-deep));   /* accent text — both ends >=4.5:1 on canvas (steel itself fails AA) */
  --grad-cta:linear-gradient(135deg,var(--navy),var(--navy-deep));
  /* Neutral canvas luminance flow — the continuous field sections sit on. */
  --grad-field:linear-gradient(180deg,var(--canvas),#FBFBFC 22%,var(--canvas) 40%,#F2F3F5 60%,var(--canvas) 80%,#FAFBFC 100%);

  /* Subtle grain (SVG turbulence) for premium tactility. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}