/* ==========================================================================
   Jennifer Ellis Celebrant — design tokens
   Derived from the supplied logo: cream #FEF8EE, deep green #03534D,
   mint #BBDAB2, sage #7FA796. Every text/background pairing below is WCAG AA
   (ratios in comments). Gold and sage are decorative only: 1px rules, never
   text, never a control border, never a fill.
   ========================================================================== */

/* Local fallbacks sized to the web fonts so font-display: swap does not reflow */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 103%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Sans Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 103%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* ---- Colour ---- */
  --cream:        #FEF8EE;   /* page paper, exact logo cream */
  --cream-2:      #F7EFDF;   /* deeper paper: cards, form sheet */
  --paper-bright: #FFFCF6;   /* inputs */
  --green:        #03534D;   /* headings, nav, buttons            8.46:1 on cream */
  --green-deep:   #002822;   /* hover state, footer small print  */
  --green-link:   #1F6B63;   /* running-text links                5.95:1 on cream */
  --sage:         #7FA796;   /* decorative rules and mounts only  (2.53:1) */
  --sage-deep:    #58807A;   /* sage when it must be a border or icon (4.15:1) */
  --mint:         #BBDAB2;   /* badges, selection, footer accents (5.87:1 on green) */
  --mint-wash:    #E9F1E3;   /* soft tint behind placeholder notice */
  --ink:          #2B2B29;   /* body text                        13.4:1 on cream */
  --ink-soft:     #5A5B57;   /* captions, hints                   6.48:1 on cream */
  --gold:         #B5944F;   /* the single 1px rule               (decorative) */
  --gold-soft:    #E2D3B2;   /* long hairlines between sections   (decorative) */
  --error:        #8A2E2E;   /* form errors                       7.92:1 on cream */
  --focus:        #03534D;

  /* Aliases used by base.css */
  --paper: var(--cream);
  --ink-muted: var(--ink-soft);
  --hairline: var(--gold-soft);

  /* ---- Type families ---- */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', 'Source Serif Fallback', Georgia, serif;
  --font-ui:      'Source Sans 3', 'Source Sans Fallback', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --weight-display: 300;
  --weight-display-strong: 400;
  --leading-display: 1.08;
  --leading-body: 1.6;
  --tracking-display: -0.005em;
  --tracking-caps: 0.14em;

  /* ---- Fluid type scale: px at 360px viewport -> px at 1440px ---- */
  --step--1: clamp(15px, calc(15px + 1 * ((100vw - 360px) / 1080)), 16px);   /* captions, hints, small print */
  --step-0:  clamp(18px, calc(18px + 2 * ((100vw - 360px) / 1080)), 20px);   /* body */
  --step-1:  clamp(20px, calc(20px + 4 * ((100vw - 360px) / 1080)), 24px);   /* standfirst, quotes */
  --step-2:  clamp(24px, calc(24px + 8 * ((100vw - 360px) / 1080)), 32px);   /* h3 */
  --step-3:  clamp(30px, calc(30px + 14 * ((100vw - 360px) / 1080)), 44px);  /* h2, fee figures, phone display */
  --step-4:  clamp(38px, calc(38px + 26 * ((100vw - 360px) / 1080)), 64px);  /* page h1, home hero sentence */
  --step-5:  clamp(46px, calc(46px + 42 * ((100vw - 360px) / 1080)), 88px);  /* reserved; not used on text the reader must parse */
  --text-eyebrow: clamp(15px, calc(15px + 0 * ((100vw - 360px) / 1080)), 15px);
  --text-nav: clamp(17px, calc(17px + 1 * ((100vw - 360px) / 1080)), 18px);
  --text-control: 18px;

  --text-body: var(--step-0);
  --text-small: var(--step--1);
  --text-h1: var(--step-4);
  --text-h2: var(--step-3);
  --text-h3: var(--step-2);
  --text-h4: var(--step-1);

  /* ---- Measure ---- */
  --measure: 62ch;
  --measure-narrow: 40ch;
  --measure-heading: 24ch;

  /* ---- Space (4px base, larger steps fluid) ---- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: clamp(56px, 7vw, 64px);
  --space-3xl: clamp(72px, 9vw, 96px);
  --space-4xl: clamp(88px, 11vw, 128px);
  --section: var(--space-4xl);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-text: 760px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
  --callbar-h: 64px;
  --plate-mount: 12px;

  /* ---- Shape ---- */
  --radius-s: 2px;
  --radius-m: 4px;
  --shadow-plate: 0 1px 0 rgba(3, 83, 77, 0.05), 0 18px 40px -24px rgba(0, 40, 34, 0.35);
  --shadow-bar: 0 -1px 0 var(--gold-soft), 0 -8px 24px -16px rgba(0, 40, 34, 0.25);

  /* ---- Motion ---- */
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 900ms;
  --t-video: 1000ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-colour: var(--t-fast);
  --ease-still: var(--ease-std);
}

@media (min-width: 60em) {
  :root { --header-h: 96px; }
}