/* ==========================================================================
   Ethan Carter — Design tokens
   Single source of truth for colour, type, space and layout.
   Loaded after Bootstrap 5.3 so the --bs-* mappings below take effect.
   ========================================================================== */

:root {
  /* ---- Colour: neutrals ------------------------------------------------ */
  --c-paper:        #F6F4EF;  /* page background, warm off-white          */
  --c-paper-deep:   #ECE9E2;  /* alternate sections, image mats           */
  --c-white:        #FFFFFF;  /* form fields                              */
  --c-rule:         #DAD6CD;  /* hairlines, borders                       */
  --c-rule-strong:  #B9B4A9;  /* input borders, dividers on emphasis      */
  --c-ink:          #16181D;  /* primary text, primary buttons, dark band */
  --c-graphite:     #4E525A;  /* body copy                                */
  --c-muted:        #6B6F76;  /* meta, captions (AA on paper: 4.6:1)      */

  /* ---- Colour: accent + states (used sparingly) ------------------------ */
  --c-accent:       #2B4C3F;  /* London green: focus, links, availability */
  --c-accent-tint:  #E3EAE5;
  --c-error:        #A2402A;  /* oxide: validation errors (5.7:1)         */
  --c-error-tint:   #F5E6E1;
  --c-success:      #2B4C3F;
  --c-success-tint: #E3EAE5;

  /* ---- Colour: on dark ------------------------------------------------- */
  --c-on-ink:        #F6F4EF;
  --c-on-ink-muted:  #A4A7AD;
  --c-on-ink-rule:   #34373E;

  /* ---- Typography ------------------------------------------------------ */
  --ff-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ff-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.55rem + 4.8vw, 5.5rem);    /* 44 → 88 */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 4rem);          /* 36 → 64 */
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);     /* 28 → 44 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);    /* 20 → 26 */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 → 21 */
  --fs-body:    1.0625rem;                                   /* 17      */
  --fs-small:   0.9375rem;                                   /* 15      */
  --fs-label:   0.75rem;                                     /* 12      */

  --lh-tight:   1.08;
  --lh-heading: 1.18;
  --lh-body:    1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --tracking-display: -0.02em;
  --tracking-label:   0.09em;

  --measure: 62ch;  /* max line length for running text */

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;  /*   4 */
  --s-2: 0.5rem;   /*   8 */
  --s-3: 0.75rem;  /*  12 */
  --s-4: 1rem;     /*  16 */
  --s-5: 1.5rem;   /*  24 */
  --s-6: 2rem;     /*  32 */
  --s-7: 3rem;     /*  48 */
  --s-8: 4rem;     /*  64 */
  --s-9: 6rem;     /*  96 */
  --s-10: 8rem;    /* 128 */

  --section-y: clamp(4rem, 2.5rem + 7vw, 9rem);   /* 64 → 144 vertical rhythm */
  --gutter-x:  clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem); /* 20 → 40 side gutter */

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1320px;
  --header-h: 76px;

  /* ---- Shape, lines, motion ------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;   /* buttons, inputs */
  --radius-2: 4px;   /* images, panels  */
  --border:   1px solid var(--c-rule);

  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  --focus-ring: 0 0 0 3px var(--c-paper), 0 0 0 5px var(--c-accent);

  /* ---- Bootstrap 5.3 mappings ----------------------------------------- */
  --bs-body-bg:            var(--c-paper);
  --bs-body-color:         var(--c-graphite);
  --bs-body-font-family:   var(--ff-body);
  --bs-body-font-size:     var(--fs-body);
  --bs-body-line-height:   var(--lh-body);
  --bs-emphasis-color:     var(--c-ink);
  --bs-heading-color:      var(--c-ink);
  --bs-secondary-color:    var(--c-muted);
  --bs-link-color:         var(--c-ink);
  --bs-link-color-rgb:     22, 24, 29;
  --bs-link-hover-color:   var(--c-accent);
  --bs-link-hover-color-rgb: 43, 76, 63;
  --bs-border-color:       var(--c-rule);
  --bs-border-radius:      var(--radius-1);
  --bs-border-radius-sm:   var(--radius-1);
  --bs-border-radius-lg:   var(--radius-2);
  --bs-gutter-x:           2rem;
  --bs-focus-ring-color:   rgba(43, 76, 63, 0.35);
  --bs-form-invalid-color:        var(--c-error);
  --bs-form-invalid-border-color: var(--c-error);
  --bs-form-valid-color:          var(--c-success);
  --bs-form-valid-border-color:   var(--c-success);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}