/* =============================================================================
   DESIGN TOKENS — SINGLE SOURCE OF TRUTH FOR THE VISUAL IDENTITY
   -----------------------------------------------------------------------------
   This is the ONLY file you need to edit to restyle the whole website:
   brand palette, typography, spacing, radii, shadows and logo sizing.

   Every other stylesheet consumes these custom properties and never hardcodes
   a colour value, so a change here propagates everywhere.

   HOW TO CHANGE THE BRAND COLOURS
   1. Replace the four values in the "BRAND PALETTE" block below.
   2. Check the derived "semantic" colours further down: text colours must keep
      a contrast ratio of at least 4.5:1 against their background (WCAG 2.2 AA).
      Use https://webaim.org/resources/contrastchecker/ to verify.

   HOW TO CHANGE THE LOGO
   The logo files live in /assets/img/ (logo.svg, logo-mark.svg, favicon.svg).
   Replace those files keeping the same names and the site picks them up
   automatically; adjust --logo-height below if the new artwork needs it.
============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     BRAND PALETTE — the four official brand colours
     --------------------------------------------------------------------------- */
  --brand-gold: #dc9100;   /* Primary accent — highlights, buttons, underlines */
  --brand-teal: #446165;   /* Secondary — headings, primary buttons, footer    */
  --brand-blush: #f3c8ac;  /* Tertiary — soft backgrounds and decorations      */
  --brand-white: #ffffff;  /* Base surface                                     */

  /* ---------------------------------------------------------------------------
     PALETTE VARIATIONS — tints and shades derived from the brand colours.
     They exist so that text always reaches an accessible contrast ratio.
     --------------------------------------------------------------------------- */
  --brand-gold-dark: #8a5a00;   /* Accessible gold for text on light surfaces  */
  --brand-gold-soft: #f7e4c4;   /* Very light gold for badges and dividers     */
  --brand-teal-dark: #2d4649;   /* Hover state of the primary button           */
  --brand-teal-ink: #1f2e30;    /* Body copy — high contrast, warm dark        */
  --brand-blush-soft: #fdf3ec;  /* Page background tint                        */
  --brand-blush-deep: #e8b394;  /* Decorative borders on blush surfaces        */

  /* ---------------------------------------------------------------------------
     SEMANTIC COLOURS — always use these in components, never the raw palette
     --------------------------------------------------------------------------- */
  --color-bg: var(--brand-white);
  --color-bg-alt: var(--brand-blush-soft);
  --color-bg-contrast: var(--brand-teal);

  /* Darker teal in the footer: it lifts the blush links to a 6.5:1 contrast */
  --color-footer-bg: var(--brand-teal-dark);
  --color-surface: var(--brand-white);
  --color-surface-soft: var(--brand-blush-soft);

  --color-text: var(--brand-teal-ink);        /* 13.9:1 on white               */
  --color-text-muted: #4f5f61;                /*  7.2:1 on white               */
  --color-text-invert: var(--brand-white);
  --color-heading: var(--brand-teal);         /*  6.7:1 on white               */
  --color-accent: var(--brand-gold);          /* Decorative use only           */
  --color-accent-text: var(--brand-gold-dark);/*  5.9:1 on white — safe text   */
  --color-on-accent: #241700;                 /*  6.4:1 on brand gold          */

  --color-border: #e6dcd4;
  --color-border-strong: #cdbcae;
  --color-focus: var(--brand-gold-dark);      /* Visible focus ring            */

  --color-success-bg: #e8f3ee;
  --color-success-text: #1c5c40;
  --color-error-bg: #fbeceb;
  --color-error-text: #a11d16;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     Font stacks are system based on purpose: no external font is downloaded,
     which keeps the site fast and avoids transferring visitor IP addresses to
     third-party font CDNs (a GDPR concern). To self-host a custom font, add the
     @font-face rules in base.css and prepend the family here.
     --------------------------------------------------------------------------- */
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-lg: 1.1875rem;   /* 19px */
  --text-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --text-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---------------------------------------------------------------------------
     SPACING SCALE — used for paddings, gaps and vertical rhythm
     --------------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */
  --container-max: 72rem;      /* Standard content width                       */
  --container-narrow: 46rem;   /* Reading width for legal pages and prose      */
  --header-height: 4.5rem;

  /* ---------------------------------------------------------------------------
     SHAPES AND DEPTH
     --------------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 46, 48, 0.06), 0 2px 8px rgba(31, 46, 48, 0.05);
  --shadow-md: 0 6px 24px rgba(31, 46, 48, 0.08);
  --shadow-lg: 0 18px 48px rgba(31, 46, 48, 0.12);

  /* ---------------------------------------------------------------------------
     MOTION — kept subtle; fully disabled under prefers-reduced-motion
     --------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------------------------------------------------------------------------
     LOGO SIZING — adjust if you replace the artwork in /assets/img/
     --------------------------------------------------------------------------- */
  --logo-height: 2.75rem;
  --logo-height-footer: 3.25rem;

  /* Stacking order, centralised to avoid z-index conflicts */
  --z-header: 100;
  --z-menu: 110;
  --z-consent: 200;
}