/* ---------------------------------------------------------------------------
   Smoofl design tokens

   Values are lifted from the site's own Divi customizer settings
   (smfl_options -> et_divi) and the `smoofl` child theme stylesheet, not
   eyeballed from screenshots. Source of each group noted inline.
   --------------------------------------------------------------------------- */

:root {
  /* -- Brand colour ------------------------------------------------------ */
  /* et_divi: font_color / header_color / link_color */
  --c-slate:        #474b62;   /* body text, headings, links               */
  --c-slate-deep:   #25293b;   /* dark sections, footer                    */

  /* et_divi: all_buttons_bg_color / accent_color / secondary_accent_color  */
  --c-pink:         #ff4fa3;   /* primary CTA                              */
  --c-pink-soft:    #ff98a5;   /* accent, highlights                       */
  --c-pink-deep:    #e8356a;   /* CTA text on hover                        */
  --c-yellow:       #ffd652;   /* CTA hover background                     */
  --c-teal:         #36b3b7;   /* secondary accent                         */

  /* child theme greys */
  --c-white:        #ffffff;
  --c-off-white:    #f7f6f7;
  --c-grey-200:     #d9d9d9;
  --c-grey-300:     #cbcbcb;

  --c-text:         var(--c-slate);
  --c-heading:      var(--c-slate);
  --c-link:         var(--c-slate);
  --c-link-hover:   var(--c-pink);
  --c-bg:           var(--c-white);

  /* -- Typography -------------------------------------------------------- */
  /* et_divi: heading_font "HVD Comic", body_font "Nunito Sans"             */
  /* Phosphate Solid is the brand's loud voice: the pink all-caps statements.
     HVD Comic is the warmer secondary heading face. Both come from the site's
     own et-fonts directory. */
  --font-display: "Phosphate Solid", "Alfa Slab One", Impact, sans-serif;
  --font-heading: "HVD Comic Serif Pro", "Alfa Slab One", Georgia, serif;
  --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;

  /* et_divi: body_font_size 18, body_font_height 1.6,
              body_header_size 40, body_header_height 1.0                   */
  --text-base:    1.125rem;   /* 18px */
  --leading-body: 1.6;
  --leading-head: 1.05;       /* 1.0 is tight for multi-line headings       */

  /* h1 is 40px per the customizer; the rest follow a 1.25 modular scale.   */
  --text-h1: 2.5rem;          /* 40px */
  --text-h2: 2rem;            /* 32px */
  --text-h3: 1.5rem;          /* 24px */
  --text-h4: 1.25rem;         /* 20px */
  --text-sm: 0.9375rem;       /* 15px */

  /* Original ran the display line at 60px/1.0. Fluid so it stays loud on a
     phone without overflowing. */
  --text-shout: clamp(2.1rem, 6.2vw, 4rem);
  --leading-shout: 0.98;

  /* et_divi: all_buttons_font_size 16, all_buttons_font_style bold         */
  --text-button: 1rem;
  --weight-button: 700;

  /* -- Space & shape ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius:      8px;
  --radius-pill: 999px;
  --measure:     68ch;        /* readable line length for info pages       */
  --container:   1180px;

  --shadow-sm: 0 1px 2px rgba(37, 41, 59, 0.06);
  --shadow-md: 0 6px 24px rgba(37, 41, 59, 0.10);

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* et_divi: phone_body_font_size 14, phone_header_font_size 30,
            tablet_body_font_size 16                                        */
@media (max-width: 980px) {
  :root { --text-base: 1rem;      --text-h1: 2rem;     --text-h2: 1.625rem; }
}
@media (max-width: 640px) {
  :root { --text-base: 0.875rem;  --text-h1: 1.875rem; --text-h2: 1.5rem; }
}