/* ==========================================================================
   WeSearch — BRAND DESIGN TOKENS  (single source of truth)
   --------------------------------------------------------------------------
   Robyn's FINAL colours/logos/fonts are still pending. When they arrive,
   change values HERE ONLY — every component reads these variables, so the
   whole site re-skins from this one file. Do not hard-code brand values
   anywhere else.
   ========================================================================== */

:root {
  /* --- Colours (provisional — from Brand Identity Kit) --- */
  --c-navy:  #24427A;
  --c-gold:  #E1CBA8;
  --c-cream: #FBF6F3;
  --c-white: #FFFFFF;

  /* Derived / usage aliases — remap these if the palette changes */
  --c-ink:          var(--c-navy);      /* primary text + headings */
  --c-accent:       var(--c-gold);
  --c-bg:           var(--c-cream);     /* page background */
  --c-surface:      var(--c-white);     /* cards / raised surfaces */
  --c-on-navy:      var(--c-cream);     /* text on navy blocks */
  --c-muted:        #5b6b86;            /* secondary body text */
  --c-line:         #e7ddcf;            /* hairline borders */
  --c-gold-deep:    #c9a86e;            /* readable gold for small text/links */

  /* --- Typography ---
     Aptos is a Microsoft font with no free web-served version; we fall back
     to a near-identical system sans until a licensed web font is supplied.  */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;      /* Bold headings */
  --font-heading: "Montserrat", "Segoe UI", system-ui, sans-serif;      /* SemiBold labels */
  --font-body:    "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script:  "Pacifico", cursive;  /* handwritten annotations ONLY */

  --fw-display: 700;   /* Montserrat Bold */
  --fw-heading: 600;   /* Montserrat SemiBold */
  --fw-body:    400;

  /* --- Logo swap-point (change filename here to swap the header logo) --- */
  --logo-full: url("../img/logo-full.svg");

  /* --- Scale / spacing / radius / shadow --- */
  --maxw: 1160px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(36, 66, 122, 0.06);
  --shadow-md: 0 12px 34px rgba(36, 66, 122, 0.12);
  --ease: cubic-bezier(.22, .61, .36, 1);
}