/*
 * Project brand configuration: the values that change between client projects. Everything else in the
 * theme reads these tokens (css/main.css maps them onto Bootstrap), so a new brand means editing this
 * file, replacing the fonts in fonts/ and uploading the logo.
 * Each *-rgb triplet feeds Bootstrap's rgba() utilities and must match its hex value.
 */

/* Self-hosted variable fonts, subset to Latin (every .woff2 in fonts/ is preloaded) */
/* Bricolage Grotesque has an optical-size axis (12–96): browsers match it to the font size, so large headings
   get its tighter display shapes and small ones its sturdier text shapes */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable-Latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable-Latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --color-primary: #242424;
  --color-primary-rgb: 36, 36, 36;
  /* Hover/pressed state for primary buttons */
  --color-primary-hover: #000000;
  --color-secondary: #4a3328;
  --color-secondary-rgb: 74, 51, 40;
  --color-accent: #b8643e;
  --color-accent-rgb: 184, 100, 62;

  --color-background: #f7f3ed;
  --color-background-rgb: 247, 243, 237;
  --color-surface: #ffffff;
  --color-surface-muted: #efe8df;
  --color-surface-muted-rgb: 239, 232, 223;
  /* The footer: a warm near-black, so the dark band belongs to the cream pages above it (cream text 13.7:1) */
  --color-footer: #2a2522;
  --color-footer-rgb: 42, 37, 34;

  --color-text: #242424;
  --color-text-rgb: 36, 36, 36;
  --color-text-muted: #6b6864;
  --color-text-muted-rgb: 107, 104, 100;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #c9c3bc;

  --color-border: #ded8d1;
  /* Form field edges need 3:1 against the surface (WCAG 1.4.11) */
  --color-border-strong: #8c857e;

  --color-success: #317a55;
  --color-success-rgb: 49, 122, 85;
  --color-warning: #b7791f;
  --color-warning-rgb: 183, 121, 31;
  --color-danger: #b43a3a;
  --color-danger-rgb: 180, 58, 58;

  /* Text-safe shades: at least 4.5:1 on the background and surfaces, for text, links and small icons.
     Needed where a base colour is too light for text (here accent is 3.9:1 and warning 3.3:1). */
  --color-accent-strong: #9e5332;
  --color-accent-strong-rgb: 158, 83, 50;
  --color-accent-on-dark: #e0a283;
  --color-success-strong: #25603f;
  --color-warning-strong: #8a5a12;
  --color-danger-strong: #9a2f2f;
  /* Errors on dark surfaces (the footer's newsletter form): 6.5:1 on the primary colour */
  --color-danger-on-dark: #f08c8c;
  --color-danger-on-dark-rgb: 240, 140, 140;

  /* Typography */
  --font-heading: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-heading: 500;
  --font-weight-heading-strong: 600;

  /* Radius: small (checkboxes), default (buttons, fields, alerts, status badges), large (cards, images), extra
     large (dialogs), and pill for small decorative markers (the hero slider's dots). Near-square geometry:
     corners are only softened, badges included. */
  --radius-sm: 0;
  --radius: 0.125rem;
  --radius-lg: 0.125rem;
  --radius-xl: 0.25rem;
  --radius-pill: 50rem;
}