/* MIKO design tokens — the palette and type system from the brand book.
   Shared by every page, so a colour changes in exactly one place. */

/* =====================================================================
   FONTS — all self-hosted, no request to Google.

   Two sets ship in /fonts. The active one is chosen by the three
   --font-* variables in :root, a few lines below.

   ACTIVE (default)          the softer, more legible pairing
     Poppins         headings
     Shantell Sans   labels, buttons, marquee
     Quicksand       body copy

   ALSO INCLUDED             the brand book's own display faces
     Bernoru         headings        Black Ultra Expanded — very wide and
                                     loud; sets ~40% wider than Poppins
     Childling       labels          goes muddy at small uppercase sizes

   To switch to the brand-book pair, change --font-heading and --font-label
   in :root. Nothing else needs touching; the @font-face rules for all
   four are declared here already.
   ===================================================================== */

/* --- headings: Poppins ------------------------------------------------ */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-latin-800-normal.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap}

/* --- labels: Shantell Sans -------------------------------------------- */
@font-face{font-family:"Shantell Sans";src:url("../fonts/shantell-sans-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Shantell Sans";src:url("../fonts/shantell-sans-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* --- body: Quicksand, variable 300-700 -------------------------------- */
@font-face{font-family:"Quicksand";src:url("../fonts/Quicksand.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}

/* --- brand-book display faces, declared but not active by default ----- */
@font-face{font-family:"Bernoru";src:url("../fonts/Bernoru.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Childling";src:url("../fonts/Childling.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* --- Primary --- */
  --candy-pink:#FF9CB9;
  --pine-forest:#0E8043;
  /* --- Secondary --- */
  --butter:#FDDB43;
  --ibiza-blue:#4B71CB;
  --soft-rust:#E55308;
  /* --- Tertiary --- */
  --lilac:#D6A9DE;
  --pearl:#F2EAE5;
  --lime-glow:#CDF28D;
  --ash-black:#312F2C;

  /* Swap "Poppins" for "Bernoru" here to use the brand-book display face. */
  --font-heading:"Poppins",system-ui,sans-serif;
  /* Swap "Shantell Sans" for "Childling" here to match. */
  --font-label:"Shantell Sans",system-ui,sans-serif;
  --font-body:"Quicksand",ui-sans-serif,system-ui,sans-serif;    /* paragraphs */

  /* ---------------------------------------------------------------
     Spacing scale. Every margin and pad in the site comes from here,
     which is what stops the rhythm drifting section to section.
     Based on 4px, roughly a 1.5 ratio.
     --------------------------------------------------------------- */
  --sp-1:.25rem;   /*  4px */
  --sp-2:.5rem;    /*  8px */
  --sp-3:.75rem;   /* 12px */
  --sp-4:1rem;     /* 16px */
  --sp-5:1.5rem;   /* 24px */
  --sp-6:2rem;     /* 32px */
  --sp-7:3rem;     /* 48px */
  --sp-8:4rem;     /* 64px */
  --sp-9:6rem;     /* 96px */

  /* Vertical rhythm for full-width bands, fluid between phone and desktop. */
  --section-y:clamp(3rem, 7vw, 5.5rem);
  --block-y:clamp(2rem, 4vw, 3rem);

  /* ---------------------------------------------------------------
     Elevation. The brand's hard offset shadow, toned down two steps
     from the original so the page reads considered rather than loud.
     --------------------------------------------------------------- */
  --hard:5px 5px 0 var(--ash-black);
  --hard-sm:3px 3px 0 var(--ash-black);
  --hard-xs:2px 2px 0 var(--ash-black);

  --line:2px;                       /* default border weight */
  --line-thick:3px;                 /* for hero-level elements only */
  --radius:18px;
  --radius-lg:24px;
  --radius-sm:12px;

  /* Type scale — fluid, so nothing needs a mobile override.
     Sized for Poppins. If you switch --font-heading to Bernoru Black Ultra
     Expanded, drop --t-hero to ~2.9rem and --t-h2 to ~1.85rem: it sets about
     40% wider and will otherwise wrap onto extra lines. */
  --t-hero:clamp(2.4rem, 6.4vw, 4rem);
  --t-h2:clamp(1.6rem, 3.4vw, 2.35rem);
  --t-h3:clamp(1.05rem, 1.6vw, 1.2rem);
  --t-lede:clamp(1rem, 1.5vw, 1.1rem);
  --t-body:1rem;
  --t-small:.9rem;
  --t-tiny:.8rem;

  --ease:cubic-bezier(.2,.7,.3,1);
}