/* ==========================================================================
   CSS Custom Properties (Design Tokens) — CBTm Brand Palette
   ========================================================================== */

:root {
    /* --- Brand Colors (exact from cbtm.ca) --- */
    --color-navy: #191b59;          /* theme-primary: headings, nav hover, active */
    --color-primary: #4A54AE;       /* theme-secondary: buttons, accents */
    --color-purple-light: #8864B9;  /* gradient end, subtle accents */
    --color-teal: #6DC0D5;          /* slider CTAs, highlight buttons */

    /* --- Semantic Aliases --- */
    --color-primary-hover: #4A54AE;
    --color-secondary: #4A54AE;
    --color-accent: #6DC0D5;
    --color-accent-hover: #8864B9;

    --color-text: #191B59;
    --color-text-muted: #777777;
    --color-heading: #191b59;

    --color-bg: #F0F1F8;
    --color-bg-white: #ffffff;
    --color-bg-light: #f5f5f5;
    --color-bg-dark: #333333;

    --color-border: #eeeeee;
    --color-border-focus: #dddddd;
    --color-border-hover: #999999;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-success: #28a745;
    --color-error: #dc3545;
    --color-warning: #ffc107;

    --color-shadow: rgba(0, 0, 0, 0.05);
    --color-shadow-strong: rgba(0, 0, 0, 0.15);
    --color-overlay: rgba(0, 0, 0, 0.6);

    /* --- Gradients --- */
    --gradient-brand: linear-gradient(to right, #4A54AE, #8864B9);

    /* --- Typography --- */
    --font-primary: 'Open Sans', "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-quicksand: "Quicksand", sans-serif;
    --font-accent: "Quicksand", sans-serif;  /* headings, section titles — matches cbtm.ca */
    --font-opensans: "Open Sans", "open-sans", sans-serif;
    --font-dosis: "Dosis", sans-serif;
    --font-bariol: "Bariol", "Source Sans Pro", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --font-size-base: 18px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 27px;
    --font-size-3xl: 30px;
    --font-size-4xl: 27px;
    --font-size-5xl: 30px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    --line-height-base: 1.5;
    --line-height-heading: 1.2;
    --line-height-tight: 1.1;

    /* --- Spacing --- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;

    /* --- Layout --- */
    --container-max: 1740px;
    --container-padding: 1.25rem;
    --container-narrow: 800px;
    --container-content: 1240px;
    --container-wide: 1400px;

    /* --- Border Radius --- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-full: 9999px;

    /* --- Transitions --- */
    --transition-fast: 200ms ease-in-out;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* --- Z-index Scale --- */
    --z-dropdown: 100;
    --z-sticky: 999;
    --z-overlay: 300;
    --z-modal: 9999;
    --z-toast: 500;
}