/* ===================================================================
   DESIGN TOKENS — single source of truth for the whole site.
   Link this file FIRST on every page (before any other stylesheet).

   When adding a new color/spacing/shadow, add it here, not inline.
   When changing a brand color, change it here only.

   Palette: warm cream background, navy ink, soft blue + gold accents.
   =================================================================== */

/* Heading font (Crete Round — single weight 400, rounded slab serif) */
@import url('https://fonts.googleapis.com/css2?family=Crete+Round&display=swap');

:root {
  /* ── Fonts ────────────────────────────────────────────────────── */
  --font-heading: 'Crete Round', Georgia, 'Times New Roman', serif;

  /* ── Brand colors ─────────────────────────────────────────────── */
  --color-primary:     #5890C3;       /* brand blue (links, accents)        */
  --color-primary-rgb: 88, 144, 195;  /* same as --color-primary; for rgba() */
  --color-dark:        #35495E;       /* navy headings, body text           */
  --color-dark-rgb:    53, 73, 94;    /* same as --color-dark; for rgba()    */
  --color-light:       #F4F5F6;       /* soft neutral grey panel / accent bg */
  --color-bg:          #FBF8F4;       /* cream page background               */
  --color-white:       #FFFDFA;       /* "site white" — soft off-white surface
                                         (cards, forms, panels), lifted just
                                         off --color-bg                       */
/*  */


  --color-contrast:         #DAAB6C;  /* warm gold (CTAs, highlights)        */
  --color-contrast-lighter: #E2BD8D;
  --color-contrast-darker:  #D2984B;  /* hover state of contrast             */

  --color-text:        #1D2834;       /* body copy on light backgrounds      */
  --color-text-rgb:    29, 40, 52;    /* same as --color-text; for rgba()    */
  --color-text-light:  #FBF8F4;       /* body copy on dark backgrounds (cream)*/

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.12);

  /* ── Radii ────────────────────────────────────────────────────── */
  --radius-card: 0.2rem;             /* "smoothed square" — site-wide   */

  /* ── Gradients ────────────────────────────────────────────────── */
  /* Section bands — flat neutral light grey */
  --gradient-section: #F4F5F6;
  /* Hero overlay — navy (--color-dark) fading to transparent over the hero image */
  --gradient-hero:    linear-gradient(to right,
                        rgba(53, 73, 94, 0.88)   0%,
                        rgba(53, 73, 94, 0.55)  35%,
                        rgba(53, 73, 94, 0.10)  65%,
                        transparent            100%);
  /* Header/footer chrome — soft cream, near-flat (blends with the page) */
  --gradient-chrome:  linear-gradient(90deg, #FBF8F4 0%, #F3EDE3 100%);
}