/* ==========================================================================
   Powerline — design tokens
   Colours sampled from the brand marks in assets/. Nothing outside this file
   should declare a raw colour, radius, shadow or easing value.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --navy: #292e7c;
  --navy-700: #21265f;
  --navy-900: #161a45;
  --navy-300: #6d73bf;
  --navy-100: #e6e8f6;

  /* Brand red, for large display type, fills, rules and graphics. At 4.38:1 on
     white it clears AA for large text but not for small, so small text and
     button fills use the darker steps below. */
  --red: #ed1c24;
  /* Small text on white/mist — 6.06:1 and 5.65:1. */
  --red-ink: #c4141b;
  /* Button fill carrying white text — 5.52:1. */
  --red-fill: #d0151d;
  --red-700: #b01017;
  --red-100: #fde7e8;

  /* WhatsApp green, darkened from #1FAF54 so white text reaches 4.96:1. */
  --wa: #12813c;
  --wa-dark: #0f7736;
  --wa-tint: #e4f6ea;

  /* --- Surfaces --------------------------------------------------------- */
  --white: #ffffff;
  --mist: #f5f7fa;
  --mist-deep: #eef1f7;
  --line: #e4e8f0;
  --line-strong: #d3d9e6;

  /* --- Text ------------------------------------------------------------- */
  --ink: #171a33;
  --slate: #5a6180;
  /* 4.79:1 on white — safe for the small labels and breadcrumbs that use it. */
  --slate-light: #6b7288;
  --on-navy: #ffffff;
  --on-navy-dim: #b9bddd;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale, 320px → 1440px viewport */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --fs-4xl: clamp(2.5rem, 1.85rem + 3.75vw, 5.25rem);
  --fs-5xl: clamp(3rem, 1.9rem + 5.75vw, 7rem);

  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-body: 1.7;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-wide: 0.06em;

  /* --- Spacing (8px rhythm) --------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --maxw: 1240px;
  --maxw-prose: 68ch;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgb(23 26 51 / 0.05), 0 1px 1px rgb(23 26 51 / 0.03);
  --sh-md: 0 4px 12px rgb(23 26 51 / 0.06), 0 1px 3px rgb(23 26 51 / 0.04);
  --sh-lg: 0 18px 40px -12px rgb(23 26 51 / 0.16), 0 4px 12px rgb(23 26 51 / 0.05);
  --sh-xl: 0 32px 70px -20px rgb(23 26 51 / 0.24), 0 8px 20px rgb(23 26 51 / 0.06);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;

  --header-h: 76px;
}

@media (max-width: 900px) {
  :root {
    --header-h: 64px;
  }
}