/* ===========================================================================
   Design tokens for Barber Specialties, Inc.
   Values come straight from the Claude Design package (DESIGN_SYSTEM.md +
   Home/Portfolio comps). Change a brand colour here and it moves everywhere.
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --blue: #3d74b4;        /* primary accent: buttons, fills, rules          */
  --blue-deep: #325184;   /* accent hover / gradient mid-stop               */
  --blue-light: #9dc3ea;  /* reversed accent on navy                        */

  /* Small blue text needs more contrast than the brand blue carries: at
     12px, #3d74b4 lands at 4.49:1 on the tinted background, a hair under
     WCAG AA. These two are the text-safe stand-ins, close enough to read as
     the same blue. Fills, rules and large numbers still use --blue. */
  --blue-ink: #3a6da9;    /* small text on white / mist  (5.3:1 / 5.0:1)    */
  --blue-soft: #6b9bd6;   /* small text on navy          (6.3:1)            */
  --navy: #16243a;        /* headings, intro backdrop                       */
  --navy-deep: #0d1626;   /* footer, careers band                           */
  --ink: #20293a;         /* default body colour                            */

  /* --- Neutrals --------------------------------------------------------- */
  --mist: #f4f7fb;        /* tinted section background                      */
  --line: #e2e9f2;        /* hairline borders on white                      */
  --line-strong: #d3ddea; /* borders on tinted panels                       */
  --slate: #4a5568;       /* body copy                                      */
  --slate-mid: #5b6b80;   /* stat labels                                    */
  --slate-soft: #647285;  /* captions, meta (4.9:1 on white)                */
  --white: #ffffff;

  /* --- Type ------------------------------------------------------------- */
  --font-head: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --step-hero: clamp(2.125rem, 1.05rem + 4.6vw, 3.875rem);   /* 34 → 62px   */
  --step-h2:   clamp(1.75rem, 1.32rem + 1.85vw, 2.5rem);     /* 28 → 40px   */
  --step-h3:   clamp(1.5rem, 1.28rem + 0.95vw, 2rem);        /* 24 → 32px   */
  --step-stat: clamp(2.125rem, 1.55rem + 2.5vw, 3rem);       /* 34 → 48px   */
  --step-body: 0.875rem;                                     /* 14px        */
  --step-lead: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);  /* 14 → 15px   */

  /* --- Space ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);            /* 20 → 48px   */
  --section-y: clamp(4rem, 2.5rem + 6vw, 6.25rem);           /* 64 → 100px  */
  --shell: 1180px;
  --shell-wide: 1280px;
  --header-h: 84px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 16px 36px -20px rgba(13, 22, 38, 0.35);
  --shadow-md: 0 24px 50px -28px rgba(13, 22, 38, 0.5);
  --shadow-lg: 0 28px 60px -34px rgba(13, 22, 38, 0.55);

  /* --- Motion ----------------------------------------------------------- */
  /* One easing vocabulary across intro, reveals and hovers so the whole site
     decelerates the same way. --ease-out is the design package's curve. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
  --ease-frame: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-sweep: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-mid: 0.45s;
  --dur-slow: 0.7s;
}

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