/* =========================================================
   Little Steps design tokens. World: The Picture Schedule.
   Colours are pinned by the brief. Never add a hex outside this file.
   ========================================================= */

@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage.woff2) format('woff2');font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(../fonts/hanken.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* ---- colour: brief palette (do not change) ---- */
  --navy:#1F3A68;        /* header, footer, safety band, headings */
  --cream:#FFFBF2;       /* page ground, never pure white */
  --lime:#7DC42B;        /* Call button only */
  --lime-soft:#A6E05A;   /* headings and marks on navy */
  --ink:#3F3B36;         /* body text */
  --muted:#6E6961;       /* captions; do not lighten */
  --line:#E4DED2;        /* hairlines on cream */

  --tint-lime:#E8F3D8;
  --tint-navy:#E4EBF6;
  --tint-sand:#F3F0DE;
  --tint-mint:#DFF1EA;

  /* ---- colour: text tones that sit on the tints (from the approved prototype) ---- */
  --on-lime:#14300A;
  --navy-2:#2E5091;
  --edge-navy:#C7CFDD;
  --sand-ink:#5C5312;
  --sand-ink-2:#7A6E1B;
  --mint-ink:#0B5245;
  --mint-ink-2:#106B58;
  --mint-edge:#C6E3D8;
  --lime-ink:#33600B;
  --lime-ink-2:#3F6F12;

  /* ---- colour: logo footprints (decorative only) ---- */
  --foot-pink:#EA86B6;
  --foot-blue:#38ABDD;

  /* ---- footprint rail tiles (logo pink and blue), horizontal and vertical ---- */
  --foot-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24'%3E%3Cg fill='%23EA86B6'%3E%3Cellipse cx='14' cy='13' rx='3.8' ry='5.4'/%3E%3Ccircle cx='11.4' cy='5.2' r='1.3'/%3E%3Ccircle cx='14' cy='4.2' r='1.4'/%3E%3Ccircle cx='16.6' cy='5.2' r='1.3'/%3E%3C/g%3E%3Cg fill='%2338ABDD'%3E%3Cellipse cx='50' cy='17' rx='3.8' ry='5.4'/%3E%3Ccircle cx='47.4' cy='9.2' r='1.3'/%3E%3Ccircle cx='50' cy='8.2' r='1.4'/%3E%3Ccircle cx='52.6' cy='9.2' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  --foot-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='72' viewBox='0 0 24 72'%3E%3Cg fill='%23EA86B6'%3E%3Cellipse cx='8' cy='12' rx='3.8' ry='5.4'/%3E%3Ccircle cx='5.4' cy='20.6' r='1.3'/%3E%3Ccircle cx='8' cy='21.6' r='1.4'/%3E%3Ccircle cx='10.6' cy='20.6' r='1.3'/%3E%3C/g%3E%3Cg fill='%2338ABDD'%3E%3Cellipse cx='16' cy='48' rx='3.8' ry='5.4'/%3E%3Ccircle cx='13.4' cy='56.6' r='1.3'/%3E%3Ccircle cx='16' cy='57.6' r='1.4'/%3E%3Ccircle cx='18.6' cy='56.6' r='1.3'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- colour: neutrals for controls and placeholders ---- */
  --card:#FFFFFF;
  --field-edge:#8A8479;  /* input border, 3.4:1 on cream */
  --ph:#B4B2A9;          /* empty photo slot */
  --ph-ink:#3F3B36;
  --error:#A62B1F;       /* form errors only, always with text and icon */

  /* ---- semantic ---- */
  --bg:var(--cream);
  --text:var(--ink);
  --text-quiet:var(--muted);
  --heading:var(--navy);
  --focus:var(--navy);

  /* ---- type ---- */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-xs:.8125rem;                                        /* 13 */
  --fs-sm:.9375rem;                                        /* 15 */
  --fs-base:1.0625rem;                                     /* 17 */
  --fs-md:clamp(1.1875rem,1.12rem + .35vw,1.3125rem);      /* 19-21 */
  --fs-lg:clamp(1.375rem,1.2rem + .9vw,1.75rem);           /* 22-28 */
  --fs-xl:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);            /* 28-40 */
  --fs-2xl:clamp(2.125rem,1.5rem + 3vw,3.75rem);           /* 34-60 */
  --fs-3xl:clamp(2.5rem,1.4rem + 5.2vw,5rem);              /* 40-80, hero only */

  --lh-tight:1.04;
  --lh-head:1.12;
  --lh-body:1.65;
  --measure:65ch;

  /* ---- space: 4px base ---- */
  --s1:.25rem;
  --s2:.5rem;
  --s3:.75rem;
  --s4:1rem;
  --s5:1.5rem;
  --s6:2rem;
  --s7:3rem;
  --s8:4rem;
  --s9:6rem;
  --section-y:clamp(3.5rem,2.4rem + 5vw,7rem);
  --gutter:clamp(1.25rem,4vw,2rem);
  --max:72rem;
  --max-text:44rem;

  /* ---- radius: one scale ---- */
  --r-sm:8px;      /* inputs, tabs */
  --r-md:20px;     /* cards */
  --r-photo:6px;   /* inner edge of a taped photo */
  --r-pill:999px;  /* buttons, chips */

  /* ---- depth: soft, offset, tinted navy ---- */
  --shadow-card:0 1px 2px rgb(31 58 104 / .06),0 12px 24px -14px rgb(31 58 104 / .28);
  --shadow-lift:0 2px 4px rgb(31 58 104 / .08),0 18px 32px -14px rgb(31 58 104 / .34);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-press:140ms;
  --dur-ui:220ms;
  --dur-reveal:600ms;
}