/* Design tokens - the single source of truth for colour, type, space and layering.
   Loaded first on every page (base.njk). Use var(--x) instead of hex values. */
:root {
    /* Brand. --brand is the accessible orange (5.2:1 on white) for text, links and
       button backgrounds; --brand-bright / --accent are decorative only (never under text). */
    --brand: #c2410c;
    --brand-dark: #9a3412;
    --brand-bright: #f97316;
    --brand-tint: #fff7ed;
    --accent: #f59e0b;
    --accent-tint: #fef3c7;
    --whatsapp: #25d366;

    /* Neutrals */
    --ink: #1e293b;          /* headings */
    --text: #334155;         /* body */
    --text-muted: #64748b;   /* secondary text, 4.8:1 on white */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --dark: #111827;

    --success: #047857;
    --danger: #b91c1c;
    --danger-tint: #fef2f2;
    --focus-ring: #1d4ed8;

    /* Type scale */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 0.8125rem;   /* 13px - smallest allowed (badges) */
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);  /* section titles */
    --fs-4xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);         /* page H1 */

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --container: 1280px;
    --gutter: 1rem;
    --header-h: 64px;   /* space reserved by the fixed header; header.css raises it to 76px from 1024px */
    --tap: 44px;        /* minimum tap target */

    /* Layering (house rule: fixed chrome 300, floating buttons / overlays 500) */
    --z-dropdown: 200;
    --z-fixed: 300;
    --z-modal: 500;

    --transition: 0.25s ease;

    /* Breakpoints (for reference - CSS vars can't be used in media queries):
       480px / 768px / 1024px / 1280px, max-width queries use 767.98 etc. */

    /* Legacy names kept for existing rules (footer.css etc.) */
    --color-slate-800: #1e293b;
    --color-white: #ffffff;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-400: #9ca3af;
    --color-gray-300: #d1d5db;
    --color-primary: var(--accent);
    --color-primary-dark: var(--brand);
    --spacing-1: var(--space-1);
    --spacing-2: var(--space-2);
    --spacing-3: var(--space-3);
    --spacing-4: var(--space-4);
    --spacing-6: var(--space-6);
    --spacing-8: var(--space-8);
    --spacing-12: var(--space-12);
    --spacing-16: var(--space-16);
    --font-size-xs: var(--fs-xs);
    --font-size-sm: var(--fs-sm);
    --font-size-base: var(--fs-base);
    --font-size-lg: var(--fs-lg);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-relaxed: 1.625;
    --border-radius-md: var(--radius-sm);
    --border-radius-lg: var(--radius);
    --border-radius-full: var(--radius-full);
    --transition-normal: 0.3s ease;
}