/* =============================================================================
   theme.css – PROJECT THEME

   ┌─ Client file ──────────────────────────────────────────────────────────────┐
   │ This is the ONLY CSS file you edit when forking the project.               │
   │ All values are CSS custom properties consumed by style.css via var().      │
   │                                                                             │
   │ Forking checklist:                                                          │
   │   1. Primary palette   → change --color-primary-* (brand colour)           │
   │   2. Font              → change --font-* + swap files in assets/webfonts/  │
   │   3. theme-color meta  → update seo.theme_color in src/content.php         │
   │      (must match --color-primary-light – HTML meta cannot use var())       │
   └────────────────────────────────────────────────────────────────────────────┘
   ============================================================================= */

:root {

    /* ── Primary colour ─────────────────────────────────────────────────────────
       The main brand colour used for buttons, links, highlights and CTAs.
       Change the whole group when forking.
       Tip: pick your main hue first, then generate dark / light variants.
       ────────────────────────────────────────────────────────────────────────── */
    --color-primary:             #0c3460;   /* darkest – hover, focus borders    */
    --color-primary-dark:        #061a35;   /* very dark – rarely used           */
    --color-primary-light:       #1a6fb0;   /* main interactive colour           */
    --color-primary-light-dark:  #145a93;   /* button hover, active states       */
    --color-primary-light-light: #4a9fd4;   /* eyebrows, subtle accents          */
    --color-primary-tint:        #e8f3fb;   /* very light background tint        */

    /* ── Neutral palette ────────────────────────────────────────────────────────
       Greys, borders and backgrounds. Rarely need changing.
       ────────────────────────────────────────────────────────────────────────── */
    --color-dark:        #1a1a1a;   /* headings, body text               */
    --color-dark-alt:    #2c2c2c;   /* hero gradient second stop         */
    --color-mid:         #555555;   /* secondary body text               */
    --color-muted:       #888888;   /* captions, notes                   */
    --color-border:      #e0e0e0;   /* dividers, input borders           */
    --color-bg:          #f8f8f6;   /* page background                   */
    --color-white:       #ffffff;
    --color-white-hover: #f0f0f0;   /* white button hover                */
    --color-table-hover: #edf5fc;   /* table row hover                   */

    /* ── Feedback colours ───────────────────────────────────────────────────────
       Used by form validation and alert components. Change only if needed.
       ────────────────────────────────────────────────────────────────────────── */
    --color-error:          #c0392b;
    --color-error-bg:       #fdf3f2;
    --color-error-border:   #e74c3c;
    --color-success:        #1e7e44;
    --color-success-bg:     #eafaf1;
    --color-success-border: #27ae60;

    /* ── Typography ─────────────────────────────────────────────────────────────
       Font stacks. If changing, swap the webfont files in assets/webfonts/ and
       update the @font-face declarations in assets/webfonts/poppins.css.
       ────────────────────────────────────────────────────────────────────────── */
    --font-display: 'Poppins', system-ui, sans-serif;   /* headings, nav, brand  */
    --font-body:    'Poppins', system-ui, sans-serif;   /* body copy             */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── Spacing scale ──────────────────────────────────────────────────────────
       Multiples of 4 px. Used throughout the layout. Change rarely.
       ────────────────────────────────────────────────────────────────────────── */
    --space-1:  0.25rem;   /*  4 px */
    --space-2:  0.5rem;    /*  8 px */
    --space-3:  0.75rem;   /* 12 px */
    --space-4:  1rem;      /* 16 px */
    --space-5:  1.25rem;   /* 20 px */
    --space-6:  1.5rem;    /* 24 px */
    --space-8:  2rem;      /* 32 px */
    --space-12: 3rem;      /* 48 px */
    --space-16: 4rem;      /* 64 px */
    --space-20: 5rem;      /* 80 px */

    /* ── Shape & depth ──────────────────────────────────────────────────────────
       Border radii and shadows define the overall "feel" (flat vs. rounded).
       ────────────────────────────────────────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px  3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* ── Motion ─────────────────────────────────────────────────────────────────
       Default easing for transitions. Change for a snappier or softer feel.
       ────────────────────────────────────────────────────────────────────────── */
    --ease: 0.22s ease;
}