/*
 * CSS Custom Properties — Uganda Museums
 * Theme: KGM-Inspired Light Editorial
 * Version: 2.0
 *
 * Single source of truth for all design tokens.
 * All other CSS files reference these variables only.
 * DO NOT hardcode colours in any other CSS file.
 */

:root {

    /* ── BACKGROUNDS (light theme) ── */
    --bg-white:   #FFFFFF;        /* Pure white — cards, sections */
    --bg-section: #F5F3EF;        /* Warm white — alternating sections */
    --bg-warm:    #FAFAF7;        /* Off-white — hero, subtle panels */
    --bg-light:   #EDE8E0;        /* Light parchment — highlighted areas */

    /* ── FOREST (quick access bar + footer CTA band) ── */
    --forest:        #2C4A3E;     /* Primary forest green */
    --forest-dark:   #1F3429;     /* Darker for hover states */
    --forest-light:  #3D6355;     /* Lighter variant */
    --forest-muted:  rgba(44, 74, 62, 0.08); /* Tint for bg highlights */

    /* ── TERRACOTTA (primary accent) ── */
    --terracotta:       #A0522D;  /* Primary CTA, links, highlights */
    --terracotta-dark:  #7D3F22;  /* Hover states */
    --terracotta-light: #C1703F;  /* Icon colours, decorative */
    --terracotta-muted: rgba(160, 82, 45, 0.10); /* Tint bg */

    /* ── TEXT ── */
    --text-primary:   #1A1A18;    /* Headings, body — near-black */
    --text-secondary: #3D3D3A;    /* Subheadings, emphasis */
    --text-muted:     #6B6B67;    /* Captions, labels, meta */
    --text-light:     #9A9A96;    /* Placeholder, disabled */

    /* ── FOOTER (only section with dark background) ── */
    --bg-footer-cta:  #2C4A3E;   /* Forest green CTA band */
    --bg-footer-main: #1A1A18;   /* Near-black main footer */
    --text-on-dark:   #F5F3EF;   /* Text on dark footer */
    --text-on-dark-muted: rgba(245, 243, 239, 0.55);

    /* ── BORDERS ── */
    --border-light:  rgba(26, 26, 24, 0.08);   /* Subtle dividers */
    --border-medium: rgba(26, 26, 24, 0.15);   /* Card borders */
    --border-strong: rgba(26, 26, 24, 0.25);   /* Separators */
    --border-accent: var(--terracotta);          /* Accent borders */

    /* ── STATUS COLOURS ── */
    --status-pending:  #B8860B;   /* Amber */
    --status-approved: #2D6A3F;   /* Green */
    --status-denied:   #B83232;   /* Red */
    --status-active:   #1A6B5E;   /* Teal */
    --status-info:     #1E4D8C;   /* Blue */

    /* ── TYPOGRAPHY ── */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── FLUID FONT SIZES ── */
    --text-xs:   clamp(0.72rem,  0.68rem + 0.2vw,  0.82rem);
    --text-sm:   clamp(0.85rem,  0.80rem + 0.25vw, 0.95rem);
    --text-base: clamp(0.95rem,  0.90rem + 0.25vw, 1.05rem);
    --text-lg:   clamp(1.10rem,  1.00rem + 0.5vw,  1.30rem);
    --text-xl:   clamp(1.40rem,  1.20rem + 1vw,    2.00rem);
    --text-2xl:  clamp(1.90rem,  1.50rem + 2vw,    3.00rem);
    --text-3xl:  clamp(2.50rem,  2.00rem + 2.5vw,  4.50rem);

    /* ── SPACING ── */
    --space-xs:      0.5rem;
    --space-sm:      1rem;
    --space-md:      2rem;
    --space-lg:      4rem;
    --space-xl:      6rem;
    --space-section: clamp(4rem, 3rem + 5vw, 8rem);

    /* ── LAYOUT ── */
    --max-width:       1200px;
    --max-width-wide:  1400px;
    --header-height:   72px;
    --quick-bar-height:48px;
    --border-radius:   6px;
    --border-radius-lg:12px;
    --border-radius-xl:20px;

    /* ── TRANSITIONS ── */
    --transition-fast: 0.18s ease;
    --transition-base: 0.28s ease;
    --transition-slow: 0.45s ease;

    /* ── SHADOWS (light-appropriate) ── */
    --shadow-xs: 0 1px 4px  rgba(26, 26, 24, 0.06);
    --shadow-sm: 0 2px 10px rgba(26, 26, 24, 0.08);
    --shadow-md: 0 4px 20px rgba(26, 26, 24, 0.10);
    --shadow-lg: 0 8px 40px rgba(26, 26, 24, 0.12);
}