/*
 Theme Name:   GTA Theme
 Theme URI:    https://granbytoxtethathletic.co.uk
 Description:  Custom child theme for Granby Toxteth Athletic CIC — a community-focused design with warm, welcoming aesthetics that emphasizes mental health and sports credibility. Built on Hello Elementor.
 Author:       Granby Toxteth Athletic CIC
 Author URI:   https://granbytoxtethathletic.co.uk
 Template:     hello-elementor
 Version:      1.0.0
 Requires at least: 6.0
 Tested up to: 6.7
 Requires PHP: 7.4
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  gta-theme
 Tags:         community, sports, woocommerce, accessible, custom-header, custom-menu
*/

/* ==========================================================================
   CSS Custom Properties — Design Tokens
   ========================================================================== */

:root {
    /* ---- Colors ---- */
    --color-primary:        #CC0000;
    --color-primary-light:  #E53935;
    --color-primary-dark:   #0A0A0A;
    --color-secondary:      #111111;
    --color-accent:         #FF0000;
    --color-accent-warm:    #990000;

    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F5F5F5;
    --color-text:           #1A1A1A;
    --color-headings:       #000000;
    --color-white:          #FFFFFF;
    --color-border:         #E0E0E0;

    /* ---- Typography ---- */
    --font-heading:         'Montserrat', sans-serif;
    --font-body:            'Nunito Sans', sans-serif;

    --fw-regular:           400;
    --fw-semibold:          600;
    --fw-bold:              700;
    --fw-extrabold:         800;

    --fs-xs:                0.75rem;     /* 12px */
    --fs-sm:                0.875rem;    /* 14px */
    --fs-base:              1rem;        /* 16px */
    --fs-md:                1.125rem;    /* 18px */
    --fs-lg:                1.25rem;     /* 20px */
    --fs-xl:                1.5rem;      /* 24px */
    --fs-2xl:               1.875rem;    /* 30px */
    --fs-3xl:               2.25rem;     /* 36px */
    --fs-4xl:               3rem;        /* 48px */

    --lh-tight:             1.2;
    --lh-snug:              1.35;
    --lh-normal:            1.6;
    --lh-relaxed:           1.75;

    /* ---- Spacing ---- */
    --space-xs:             0.25rem;     /* 4px */
    --space-sm:             0.5rem;      /* 8px */
    --space-md:             1rem;        /* 16px */
    --space-lg:             1.5rem;      /* 24px */
    --space-xl:             2rem;        /* 32px */
    --space-2xl:            3rem;        /* 48px */
    --space-3xl:            4rem;        /* 64px */
    --space-4xl:            6rem;        /* 96px */

    /* ---- Layout ---- */
    --container-max:        1200px;
    --container-wide:       1400px;
    --container-narrow:     800px;

    /* ---- Borders & Radii ---- */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            16px;
    --radius-full:          9999px;

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

    /* ---- Transitions ---- */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;

    /* ---- Header ---- */
    --header-top-height:    40px;
    --header-main-height:   80px;
    --header-height:        calc(var(--header-top-height) + var(--header-main-height));
}