/* =========================================================
   Design Tokens — Friars Poor of Jesus Christ
   Single source of truth for colour, type, spacing & motion.
   ========================================================= */
:root {
    /* --- Brand Colours --- */
    --primary-brown: #76331a;
    --primary-brown-dark: #5c2713;
    --accent-tan: #be9d81;
    --accent-gold: #c9a35e;     /* warm gold for highlights / progress */
    --dark-navy: #152433;
    --dark-navy-soft: #1d3147;
    --site-bg: #fcfcfc;
    --text-color: #2a2a2a;
    --border-color: #e4e4e4;
    --header-border: #a87951;
    --scrim: rgba(21, 36, 51, 0.45);

    /* --- Typography ---
       NOTE: the previous code referenced --header-font, which was never
       defined, so every heading silently fell back to a browser default.
       It is now defined and aliased to the brand display face. */
    --font-display: 'Montserrat', 'Montreal', sans-serif;
    --font-body: 'Open Sans', 'Google Sans', sans-serif;
    --header-font: var(--font-display);   /* backwards-compatible alias */
    --font-montreal: var(--font-display); /* backwards-compatible alias */
    --font-google-sans: var(--font-body); /* backwards-compatible alias */

    /* --- Layout --- */
    --container-width: 90%;
    --container-max: 1400px;
    --menu-panel-width: 320px;

    /* --- Z-index scale --- */
    --z-header: 1000;
    --z-menu: 1200;
    --z-scrim: 1100;
    --z-preloader: 9999;

    /* --- Motion --- */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hover-transition: all 0.3s var(--ease-in-out);
    --dropdown-transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}