/*
 * ShopwTee brand token system.
 * Light mode is the default surface; dark mode is a full parallel theme.
 * Components must read colours through these custom properties only —
 * never hard-code hex values in component CSS — so both themes stay in
 * sync from one source of truth.
 */

:root {
    /* Brand accents — identical in both themes, used deliberately, not everywhere. */
    --color-purple: #7C3AED;
    --color-pink: #FF2D75;
    --color-orange: #FF8A00;
    --color-yellow: #FFC700;
    --color-black: #111111;
    --color-cream: #FFF6E8;

    --gradient-brand: linear-gradient(90deg, #7C3AED 0%, #FF2D75 35%, #FF8A00 70%, #FFC700 100%);

    /* Semantic tokens — light mode (default) */
    --bg-page: #FFFFFF;
    --bg-surface: var(--color-cream);
    --bg-card: #FFFFFF;
    --bg-header: #FFFFFF;
    --bg-footer: var(--color-black);
    --text-primary: var(--color-black);
    --text-secondary: #4B4642;
    --text-on-dark: var(--color-cream);
    --border-subtle: #E6DFD3;
    --border-strong: #D8CFBF;
    --shadow-soft: 0 4px 16px rgba(17, 17, 17, 0.06);
    --shadow-lift: 0 12px 28px rgba(17, 17, 17, 0.12);
    --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.45);

    --color-success: #1E8E5A;
    --color-warning: var(--color-orange);
    --color-danger: #E1332F;

    /* Typography */
    --font-display: 'Bebas Neue', 'Archivo Black', 'Space Grotesk', sans-serif;
    --font-body: 'Inter', 'Manrope', 'DM Sans', sans-serif;

    --fs-h1: clamp(2.5rem, 4vw + 1rem, 4.5rem);
    --fs-h2: clamp(2rem, 2.5vw + 1rem, 3rem);
    --fs-h3: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.75rem;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --container-max: 1320px;
    --header-height: 76px;
    --announcement-height: 38px;

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

    color-scheme: light;
}

/* Light mode is always the default (brand direction — deliberately not
   following prefers-color-scheme). The inline theme-init script in
   includes/header.php / includes/admin-header.php sets data-theme="light"
   unless the visitor has explicitly chosen dark before, so this rule only
   ever activates from that explicit choice, never from system preference. */
:root[data-theme="dark"] {
    --bg-page: var(--color-black);
    --bg-surface: #17140F;
    --bg-card: #1B1814;
    --bg-header: #17140F;
    --bg-footer: #0B0A08;
    --text-primary: var(--color-cream);
    --text-secondary: #C9C0B2;
    --text-on-dark: var(--color-cream);
    --border-subtle: #302B23;
    --border-strong: #3D372C;
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg-page: #FFFFFF;
    --bg-surface: var(--color-cream);
    --bg-card: #FFFFFF;
    --bg-header: #FFFFFF;
    --bg-footer: var(--color-black);
    --text-primary: var(--color-black);
    --text-secondary: #4B4642;
    --text-on-dark: var(--color-cream);
    --border-subtle: #E6DFD3;
    --border-strong: #D8CFBF;
    --shadow-soft: 0 4px 16px rgba(17, 17, 17, 0.06);
    --shadow-lift: 0 12px 28px rgba(17, 17, 17, 0.12);
    color-scheme: light;
}