/* ==========================================================================
   HALWARD — GLOBAL DESIGN TOKENS
   Every color/spacing value used across the site is defined here.
   Never hardcode a color or radius in a template — reference these
   variables so the whole site re-skins from one place, and so the
   light/dark theme toggle (data-theme on <html>) works everywhere.

   Neutrals (bg/border/muted text/dark chrome) stay TRUE neutral gray —
   only --color-primary/--color-accent carry the brand orange hue, so it
   pops on buttons/links/icons instead of tinting the whole page warm.
   ========================================================================== */
:root {
    /* ---- Color: neutrals (light theme, default) ---- */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F6F7;
    --color-bg-dark: #1A1B1D;
    --color-bg-dark-alt: #0F1012;
    --color-bg-soft-accent: #FCE3C7;

    --color-text: #1C1D1F;
    --color-text-muted: #6B7280;
    --color-text-on-dark: #F5F5F5;
    --color-text-on-dark-muted: #A3A5A8;

    --color-card-bg: #FFFFFF;
    --color-border: #E4E6E9;
    --color-border-dark: rgba(255, 255, 255, 0.14);

    /* ---- Color: brand (professional orange — accents only) ---- */
    --color-primary: #D9631E;
    --color-primary-dark: #B04E17;
    --color-accent: #F2954D;
    --color-accent-dark: #D3762F;

    --color-success: #1F6D4C;

    /* ---- Typography ---- */
    --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

    /* ---- Scale ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(15, 16, 18, 0.06);
    --shadow-md: 0 10px 28px rgba(15, 16, 18, 0.10);
    --shadow-lg: 0 22px 50px rgba(15, 16, 18, 0.16);

    --utility-bar-height: 40px;
    --header-height: 84px;
    --container-max: 1280px;

    --transition-fast: 0.18s ease;
    --transition-mid: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Dark theme override: toggled via <html data-theme="dark"> ---- */
:root[data-theme="dark"] {
    --color-bg: #0F1012;
    --color-bg-alt: #1A1B1D;
    --color-bg-soft-accent: rgba(242, 149, 77, 0.16);

    --color-text: #F5F5F5;
    --color-text-muted: #A3A5A8;

    --color-card-bg: #202124;
    --color-border: rgba(255, 255, 255, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.44);
}