/* Double Cherry's theme (DESIGN-2, approved by Luka 2026-11-12): sketch A3's look written down once, for every page.
   The font, the colours, the type, the spacing, the surfaces (a band of colour sets its text, rules and focus ring),
   the base elements and the button. Page layout is each page's own (PAGE-1). Proposed at gate 1 as
   doc/sketches/theme.css; this file is the theme from now on. */

/* Atkinson Hyperlegible Next, served from the site (SIL Open Font License: /fonts/OFL.txt). Upright only, weights 200
   to 800 in one variable file per alphabet: Latin, and Latin Extended (Č, ć, Ž), which a browser fetches only when a
   page uses one of its letters. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colours. Each text pair is 7:1 or more (WCAG 1.4.6); the ratio is after each. */
  --cherry: #8C1131;          /* the field; buttons on white */
  --cherry-low: #67001F;      /* the field's lower end, when it is a gradient (Stitch's darkest cherry) */
  --cherry-deep: #5C0B21;     /* text on white buttons: 13.8 on white, 12.1 on blush */
  --on-cherry: #FFFFFF;       /* 9.4 on the cherry */
  --on-cherry-soft: #F9DDE3;  /* a line under a headline on the cherry: 7.4 */
  --ink: #2A1016;             /* text: 17.7 on white, 15.6 on blush */
  --muted: #5E4A4F;           /* small print: 8.2 on white */
  --blush: #FBEDEF;           /* a quiet band; hover on white buttons */
  --paper: #FFFFFF;
  --hair: rgba(42, 16, 22, 0.14);            /* rules between items, on white */
  --hair-on-dark: rgba(255, 255, 255, 0.18); /* the same on the cherry and the teal */
  --maid: #1A5F5B;            /* Hearing Maid's own colour, its band only */
  --on-maid: #FFFFFF;         /* 7.4 on the teal: every line in the band is white */
  --leaf: #4E9F63;            /* the mark's leaf only */

  /* Type: one family; 800 for headings, 400 for text, 700 for buttons and links that act like them. */
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-small: 1rem;                                   /* 16 px: footer, captions */
  --text-body: 1.1875rem;                               /* 19 px */
  --text-lead: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);    /* 20 to 24 px: the line under a headline */
  --text-h3: clamp(1.5rem, 1vw + 1.15rem, 2rem);        /* 24 to 32 px */
  --text-h2: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);     /* 36 to 60 px */
  --text-display: clamp(3.25rem, 9vw, 8.25rem);        /* 52 to 132 px: the home page's headline */
  --leading: 1.65;
  --measure: 34em;                                      /* at most about 70 characters a line (WCAG 1.4.8: 80) */

  /* Spacing: five steps, then the page's edge and the gap between sections, which grow with the window. */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --edge: clamp(1rem, 4vw, 4rem);
  --section: clamp(4.5rem, 10vw, 9rem);

  /* Focus: a 3 px ring, 3 px clear of the control, in the colour that stands out on the surface around it. */
  --focus-width: 3px;
  --focus-gap: 3px;
  --focus-colour: var(--cherry);   /* 9.4 on white, 8.2 on blush */

  /* Controls: at least 44 by 44 px (WCAG 2.5.5). */
  --target: 44px;
}

/* Surfaces: a band of colour sets its text, its rules and its focus ring. */
.surface-cherry { background: var(--cherry); color: var(--on-cherry); --focus-colour: var(--on-cherry); --hair: var(--hair-on-dark); }
.surface-cherry.gradient { background: linear-gradient(180deg, var(--cherry) 0%, var(--cherry-low) 100%); }
.surface-maid { background: var(--maid); color: var(--on-maid); --focus-colour: var(--on-maid); --hair: var(--hair-on-dark); }
.surface-blush { background: var(--blush); color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* a component's display never shows what the page hides */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--text-body); line-height: var(--leading);
  overflow-wrap: break-word; /* with text enlarged, a long word breaks rather than pushing the page sideways */
}
h1, h2, h3 { margin: 0; font-weight: 800; }
h1 { font-size: var(--text-display); line-height: 0.94; letter-spacing: -0.04em; }
h2 { font-size: var(--text-h2); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-size: var(--text-h3); line-height: 1.15; letter-spacing: -0.015em; }
.lead { font-size: var(--text-lead); line-height: 1.5; }
.surface-cherry .lead { color: var(--on-cherry-soft); }
small, .small { font-size: var(--text-small); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--focus-colour); outline-offset: var(--focus-gap); }

/* Buttons and links that look like them. Square corners, as the whole site. */
.button {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0.75rem 1.75rem;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 0;
  background: var(--cherry); color: var(--on-cherry);
}
.button:hover { background: var(--ink); }
.surface-cherry .button, .surface-maid .button { background: var(--paper); color: var(--cherry-deep); }
.surface-cherry .button:hover, .surface-maid .button:hover { background: var(--blush); }
.button.outline { background: transparent; color: inherit; border-color: currentColor; }
.button.outline:hover { background: var(--blush); color: var(--cherry-deep); }
.surface-cherry .button.outline:hover, .surface-maid .button.outline:hover { background: rgba(255, 255, 255, 0.14); color: inherit; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }