/* ==========================================================================
   Seaside Media — design tokens
   The one place colours, typefaces, sizes and spacing are defined.
   Change a value here and it changes across the whole site. See DESIGN.md.
   ========================================================================== */

/* Typefaces. Two sets; pages use the first unless the page root carries
   data-type="oswald".
   - Default (29 Oct, Jeremy): Montserrat, bold, for headlines, menu, buttons
     and the few small labels; Lora, a book serif, for reading.
   - data-type="oswald" (28 Oct, from Jeremy's survey, kept to switch back):
     Oswald condensed capitals for headlines; Archivo for reading and labels.
     Drafts only: site.js loads those two from Google Fonts when asked.
   All open licence (SIL OFL, see ../fonts/LICENCE.txt). The default set is
   served from ../fonts/, Latin letters only; each file is a variable font, so
   one file covers every weight used. (Bebas Neue, Newsreader and IBM Plex Mono
   are no longer used; their files stay in ../fonts/ but are not shipped.) */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-variable.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;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/lora-latin-variable.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;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora-latin-italic-variable.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 {
  /* Brand palette — unchanged from the existing identity */
  --ink: #030b19;
  --navy: #19263d;
  --deep: #1c687d;
  --sea: #36838c;
  --teal: #55a49d;
  --aqua: #78d6d0;
  --aqua-light: #a7e6e1;

  /* Neutrals for reading sections */
  --paper: #f4f1ea;
  --foam: #fbfaf6;

  /* Typefaces */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* headlines, menu, buttons */
  --font-text: "Lora", Georgia, "Times New Roman", serif; /* reading text */
  --font-mono: var(--font-display); /* the few small labels (the name is kept so older rules still work) */
  --display-weight: 700;
  --display-case: uppercase; /* 30 Oct, Jeremy: every title in capitals */
  --display-tracking: 0.01em;
  --display-leading: 1.08;

  /* Type scale — grows smoothly from phone to desktop. Big, never overwhelming. */
  --display-xl: clamp(2.75rem, 1.6rem + 5.2vw, 6.75rem);
  --display-l: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
  --display-m: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);
  --display-s: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --text-l: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --text-m: clamp(1rem, 0.97rem + 0.15vw, 1.0938rem);
  --text-s: 0.9375rem;
  --label: 0.75rem;
  --ui-size: 0.875rem; /* menu, buttons and links in the headline face */

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 3.5rem); /* page edge */
  --col-gap: clamp(1rem, 2vw, 2rem); /* between the 12 columns */
  --section: clamp(5rem, 11vw, 11rem); /* space above and below a section */
  --measure: 34em; /* comfortable reading width */

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms; /* hover, press */
  --dur-2: 420ms; /* reveals */
  --dur-3: 900ms; /* image moves */

  /* Defaults: the dark "ink" ground */
  --fg: var(--foam);
  --fg-muted: rgb(251 250 246 / 0.8);
  --line: rgb(251 250 246 / 0.2);
  --accent: var(--aqua);
  --btn-bg: var(--aqua);
  --btn-fg: var(--ink);
  --btn-hover: var(--foam);

  /* The arrow used on buttons and links (drawn, not an icon font) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 6h30M25 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* The 28 Oct lettering, kept so Jeremy can switch back: <html data-type="oswald">
   (in the drafts, add ?type=oswald to the address) */
:root[data-type="oswald"] {
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-text);
  --display-weight: 500;
  --display-case: uppercase;
  --display-tracking: 0.01em;
  --display-leading: 1.04;
  --ui-size: 1.0625rem;
}