/*
 * SCMS Starter — Design Tokens
 * ─────────────────────────────────────────────────────────────
 * THIS IS THE ONLY FILE THAT CHANGES BETWEEN SITES.
 * Replace the values below with the client's brand colours,
 * fonts, and spacing. All block CSS references these variables.
 *
 * How to update for a new site:
 *   1. Set --color-primary to the main brand colour
 *   2. Set --font-primary / --font-secondary (add @font-face or
 *      Google Fonts import above the :root block if needed)
 *   3. Adjust --container-width if the design uses a wider/narrower max-width
 *   4. Adjust spacing and border-radius to match the design
 * ─────────────────────────────────────────────────────────────
 */

/* ── Fonts (replace with site fonts) ─────────────────────────
   Example Google Fonts import:
   @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
*/

:root {

    /* ── Brand Colours ────────────────────────────────────────── */
    --color-primary:       #1a5276;   /* Main brand colour */
    --color-primary-dark:  #154360;   /* Darker shade for hover states */
    --color-secondary:     #2e86c1;   /* Secondary brand colour */
    --color-accent:        #f39c12;   /* Highlight / CTA colour */

    /* ── Neutral Palette ─────────────────────────────────────── */
    --color-white:         #ffffff;
    --color-black:         #000000;
    --color-light-grey:    #f5f5f5;
    --color-mid-grey:      #cccccc;
    --color-dark-grey:     #555555;
    --color-text:          #333333;
    --color-bg:            #ffffff;

    /* ── Typography ──────────────────────────────────────────── */
    --font-primary:        'Open Sans', sans-serif;
    --font-secondary:      'Georgia', serif;  /* Used for headings or pull quotes */

    --text-xs:   0.75rem;    /*  12px */
    --text-sm:   0.875rem;   /*  14px */
    --text-base: 1rem;       /*  16px */
    --text-md:   1.125rem;   /*  18px */
    --text-lg:   1.25rem;    /*  20px */
    --text-xl:   1.5rem;     /*  24px */
    --text-2xl:  2rem;       /*  32px */
    --text-3xl:  2.5rem;     /*  40px */
    --text-4xl:  3rem;       /*  48px */

    --line-height-base:    1.6;
    --line-height-heading: 1.2;

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

    /* ── Layout ──────────────────────────────────────────────── */
    --container-width:      1200px;
    --container-wide-width: 1400px;

    /* ── Borders & Radius ────────────────────────────────────── */
    --border-radius-sm:   4px;
    --border-radius-md:   8px;
    --border-radius-lg:   16px;
    --border-radius-pill: 999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.18);

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ── Banner ──────────────────────────────────────────────── */
    --banner-min-height:      280px;
    --banner-overlay-opacity: 0.4;
    --banner-text-color:      var(--color-white);

    /* ── Buttons ─────────────────────────────────────────────── */
    --btn-bg:           var(--color-primary);
    --btn-bg-hover:     var(--color-primary-dark);
    --btn-text:         var(--color-white);
    --btn-padding:      0.65rem 1.5rem;
    --btn-radius:       var(--border-radius-sm);
    --btn-font-size:    var(--text-base);

    /* ── Header ──────────────────────────────────────────────── */
    --header-bg:        var(--color-white);
    --header-text:      var(--color-text);
    --header-link:      var(--color-primary);
    --header-height:    80px;

    /* ── Footer ──────────────────────────────────────────────── */
    --footer-bg:        var(--color-primary);
    --footer-text:      var(--color-white);
    --footer-link:      var(--color-white);
}

/* ── Divider / Spacer sizes (used by dynamic-divider block) ── */
.spacer-xs  { height: var(--space-sm);  }
.spacer-sm  { height: var(--space-lg);  }
.spacer-md  { height: var(--space-xl);  }
.spacer-lg  { height: var(--space-2xl); }
.spacer-xl  { height: var(--space-3xl); }
.divider-line {
    height: 1px;
    background: var(--color-mid-grey);
    margin: var(--space-xl) 0;
}