/* ==========================================================================
   Hope Harbour: design tokens
   Extends assets/logo/brand-tokens.css (locked 26 Aug 2026) with the layout,
   type-scale, motion and semantic tokens the site needs.
   Brand colours and fonts are NOT redefined here: they are inherited.
   ========================================================================== */

:root {
  /* ---- Brand (mirrored from brand-tokens.css so this file stands alone) ---- */
  --hh-navy: #16233F;
  --hh-sky: #7FA8C9;
  --hh-gold: #F0A83A;
  --hh-orange: #E05A2B;
  --hh-red: #A5262A;

  --hh-cream: #FBF9F6;
  --hh-paper: #F3F1EC;
  --hh-rule: #E2DED6;
  --hh-ink: #201F1D;
  --hh-ink-soft: #55524D;
  /* 4.76:1 on --hh-paper, 4.90:1 on --hh-cream-dim, 5.12:1 on --hh-cream, so
     it clears WCAG 2.2 AA (4.5:1) on all three light grounds. The previous
     #8A857C measured 3.25-3.49:1 and failed on every one of them, which mattered
     because this token paints every section kicker and all muted body copy.
     The dark and tinted themes in css/a11y.css set --c-text-mute themselves,
     so this value only governs the default light theme. */
  --hh-ink-mute: #6E6A63;

  --hh-orange-text: #B0421D;
  --hh-gold-text: #8A5B10;

  --hh-font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --hh-font-body: 'Lora', Georgia, serif;

  /* ---- Derived brand tints (composed, never guessed) ------------------- */
  --hh-navy-90: #2A3653;
  --hh-navy-80: #3E4967;
  --hh-navy-deep: #101A2F;      /* footer / deep bands */
  --hh-orange-hover: #C94D22;

  /* Solid action fill.
     The raw brand orange #E05A2B gives only 3.71:1 with white text, which
     fails WCAG AA for normal-size text. The brand guide already anticipates
     this ("raw orange/gold on cream falls below 4.5:1"), so buttons use a
     darkened member of the same orange family: 5.01:1 filled, 6.40:1 hovered.
     #E05A2B stays in use for illustration and for non-text UI, where the
     3:1 threshold applies and it passes at 3.53:1. */
  --c-action-solid: #BE4A20;
  --c-action-solid-hover: #A63C18;
  --hh-orange-wash: #FCF1EB;    /* faint orange ground for callouts */
  --hh-gold-wash: #FDF6E8;
  --hh-sky-wash: #EFF4F9;
  --hh-cream-dim: #F7F4EF;

  /* ---- Inverted surfaces ------------------------------------------------
     Two distinct ideas, kept separate so the accessibility colour themes can
     remap them independently of --hh-navy (which the dark themes repurpose as
     a *text* colour):
       --c-band  : the dark feature band / footer / navy panel background
       --c-chip  : floating controls (accessibility launcher, speech bar,
                   back-to-top, pressed segment) which must contrast with the
                   page whichever way round the page is.
     Anything that uses navy as a BACKGROUND must use these, never --hh-navy. */
  --c-band: #16233F;
  --c-band-deep: #101A2F;
  --c-on-band: #FBF9F6;
  --c-on-band-soft: #C6CDDB;
  --c-on-band-mute: #93A0B7;
  --c-band-rule: rgba(251, 249, 246, .16);

  --c-chip: #16233F;
  --c-chip-hover: #2A3653;
  --c-on-chip: #FBF9F6;

  /* Reverse-ground text (on navy) */
  --hh-on-navy: #FBF9F6;
  --hh-on-navy-soft: #C6CDDB;
  --hh-on-navy-mute: #93A0B7;
  --hh-rule-navy: rgba(251, 249, 246, .16);

  /* ---- Semantic ------------------------------------------------------- */
  --c-bg: var(--hh-cream);
  --c-bg-alt: var(--hh-paper);
  --c-text: var(--hh-ink);
  --c-text-soft: var(--hh-ink-soft);
  --c-text-mute: var(--hh-ink-mute);
  --c-heading: var(--hh-navy);
  --c-rule: var(--hh-rule);
  --c-action: var(--hh-orange);
  --c-action-text: var(--hh-orange-text);
  --c-focus: var(--hh-navy);
  --c-success: #1F6B4A;
  --c-success-wash: #ECF5F0;
  --c-error: #A5262A;
  --c-error-wash: #FBEDED;

  /* ---- Type scale -----------------------------------------------------
     Fluid, clamped. Display sizes get lighter as they get larger, per the
     brand guide. Body never drops below 16px (iOS auto-zoom + WCAG).      */
  --t-display-1: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);      /* 40 → 72 */
  --t-display-2: clamp(2rem, 1.4rem + 2.7vw, 3.5rem);        /* 32 → 56 */
  --t-display-3: clamp(1.625rem, 1.28rem + 1.5vw, 2.375rem); /* 26 → 38 */
  --t-h4:        clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); /* 22 → 30 */
  --t-h5:        clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem); /* 18 → 22 */
  --t-lede:      clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem);/* 18 → 23 */
  --t-body:      1.0625rem;                                   /* 17 */
  --t-small:     1rem;                                        /* 16 on small screens */
  --t-kicker:    0.6875rem;                                   /* 11 */

  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body: 1.7;

  /* ---- Rhythm ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 176px;

  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --measure: 66ch;
  --measure-tight: 54ch;

  --wrap: 1240px;
  --wrap-wide: 1440px;
  --wrap-text: 760px;

  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Elevation: restrained. This design leans on hairlines, not shadow. */
  --shadow-1: 0 1px 2px rgba(22, 35, 63, .05);
  --shadow-2: 0 4px 14px -4px rgba(22, 35, 63, .10), 0 1px 2px rgba(22, 35, 63, .04);
  --shadow-3: 0 18px 44px -18px rgba(22, 35, 63, .22), 0 2px 6px rgba(22, 35, 63, .06);
  --shadow-4: 0 32px 70px -24px rgba(22, 35, 63, .30);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* entrances */
  --ease-in: cubic-bezier(.55, 0, .68, .2);      /* exits */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.42, .5, 1);

  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --dur-reveal: 760ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-a11y: 1100;
  --z-toast: 1200;

  --header-h: 74px;
}

/* --t-small stays at 16px on every screen. 16px is the practical floor for
   body text on a phone (and what stops iOS zooming a focused form field), and
   on desktop there is no good reason to make secondary copy smaller for an
   audience that includes people with low vision. The 17/16 pairing with
   --t-body still reads as a hierarchy. */

/* Header grows to hold the full lockup at the size the brand guide asks for
   (200-240px wide, roughly 62-75px tall). */
@media (min-width: 700px)  { :root { --header-h: 92px; } }
@media (min-width: 1120px) { :root { --header-h: 116px; } }

/* ==========================================================================
   Accessibility preference overrides
   Driven by data-* attributes on <html>, set by js/a11y.js and echoed by an
   inline pre-paint script in each page's <head> so there is no flash.
   Colour themes and the reading aids live in css/a11y.css.
   ========================================================================== */

/* -- Text size ------------------------------------------------------------ */
html[data-hh-textsize="112"] { font-size: 112.5%; }
html[data-hh-textsize="125"] { font-size: 125%; }
html[data-hh-textsize="150"] { font-size: 150%; }

/* -- High-legibility font ------------------------------------------------- */
html[data-hh-font="legible"] {
  --hh-font-display: 'Atkinson Hyperlegible', 'Trebuchet MS', system-ui, sans-serif;
  --hh-font-body: 'Atkinson Hyperlegible', 'Trebuchet MS', system-ui, sans-serif;
}
html[data-hh-font="legible"] .display,
html[data-hh-font="legible"] h1,
html[data-hh-font="legible"] h2,
html[data-hh-font="legible"] h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* -- Generous text spacing (meets WCAG 1.4.12 comfortably) ---------------- */
html[data-hh-spacing="wide"] {
  --lh-body: 2;
  --lh-heading: 1.4;
  --lh-display: 1.25;
}
html[data-hh-spacing="wide"] body {
  letter-spacing: 0.075em;
  word-spacing: 0.16em;
}
html[data-hh-spacing="wide"] p { margin-bottom: 2em; }

/* -- Highlight links ------------------------------------------------------ */
html[data-hh-links="on"] a:not(.btn):not(.logo-link) {
  background: #FFF3BF;
  outline: 2px solid var(--hh-gold-text);
  outline-offset: 1px;
  color: #33290A !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}
html[data-hh-links="on"] .band-navy a:not(.btn),
html[data-hh-links="on"] footer a:not(.btn) {
  background: #FFF3BF;
  color: #33290A !important;
}

/* -- Reduced motion (user toggle + OS preference) ------------------------- */
html[data-hh-motion="reduce"] *,
html[data-hh-motion="reduce"] *::before,
html[data-hh-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
html[data-hh-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; }
html[data-hh-motion="reduce"] .hh-ruler, html[data-hh-motion="reduce"] .hh-mask { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}