/* ==========================================================================
   Mamba Jiu Jitsu theme
   Dark is the default. Light is a high-contrast alternative.
   Shared typography/shape tokens live in :root; each mode overrides color,
   glass, and a barely-there weave overlay. Pairs with theme-base.css.
   ========================================================================== */

:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Barlow Condensed', 'Inter', sans-serif;
    --heading-transform: uppercase;
    --heading-tracking: 0.03em;
    --brand-tracking: 0.07em;
    --heading-weight: 700;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --max-width: 1240px;

    --motion: 320ms ease-out;
    --motion-slow: 420ms ease-out;
}

/* ------------------------------ Dark mode ------------------------------ */
[data-theme="dark"] {
    --color-bg: #070809;
    --color-surface: #121315;
    --color-text: #f4f2ec;
    --color-text-muted: #9a978f;
    --color-accent: #c9a227;
    --color-accent-hover: #e0bc4a;
    --color-accent-contrast: #070809;
    --color-accent-red: #b22222;
    --color-accent-red-hover: #c62b3a;
    --color-border: rgba(201, 162, 39, 0.18);
    --color-danger: #e0736e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.18), 0 18px 40px rgba(0, 0, 0, 0.45);

    --body-bg:
        radial-gradient(circle at 8% 0%, rgba(178, 34, 34, 0.08) 0, transparent 38%),
        radial-gradient(circle at 92% 6%, rgba(201, 162, 39, 0.08) 0, transparent 36%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='0.06' stroke-width='0.5'%3E%3Cellipse cx='14' cy='12' rx='11' ry='7' transform='rotate(-5 14 12)'/%3E%3Cellipse cx='42' cy='12' rx='11' ry='7' transform='rotate(5 42 12)'/%3E%3Cellipse cx='28' cy='36' rx='11' ry='7' transform='rotate(-5 28 36)'/%3E%3C/g%3E%3C/svg%3E"),
        #070809;

    --nav-bg: rgba(7, 8, 9, 0.72);
    --nav-hover-bg: rgba(201, 162, 39, 0.10);
    --card-bg: rgba(18, 19, 21, 0.78);
    --card-border: rgba(201, 162, 39, 0.18);
    --card-shadow: var(--shadow-gold);
    --glass-bg: rgba(20, 21, 23, 0.72);
    --glass-border: rgba(201, 162, 39, 0.18);
    --section-bg: rgba(20, 21, 23, 0.55);
    --section-shadow: none;
    --subtle-bg: rgba(12, 13, 14, 0.86);
    --callout-bg: linear-gradient(135deg, rgba(201, 162, 39, 0.12), rgba(201, 162, 39, 0.02));
    --row-hover: rgba(201, 162, 39, 0.06);
    --input-bg: rgba(10, 11, 12, 0.9);
    --input-border: rgba(201, 162, 39, 0.22);
    --focus-ring: rgba(201, 162, 39, 0.32);

    --brand-color: var(--color-accent);
    --hero-bg: radial-gradient(120% 140% at 50% 0%, #16171a 0%, #070809 72%);
    --hero-border: 1px solid rgba(201, 162, 39, 0.28);
    --hero-radius: 0 0 var(--radius-lg) var(--radius-lg);
    --hero-heading-color: #f4f2ec;
    --hero-logo-filter: sepia(0.45) saturate(2.4) hue-rotate(8deg) brightness(1.04);
    --logo-filter: none;

    --btn-primary-bg: var(--color-accent);
    --btn-primary-color: #070809;
    --btn-primary-hover: var(--color-accent-hover);
    --btn-secondary-bg: transparent;
    --btn-secondary-color: var(--color-text);
    --btn-secondary-border: rgba(201, 162, 39, 0.35);
    --footer-bg: rgba(7, 8, 9, 0.92);
}

/* ------------------------------ Light mode ----------------------------- */
[data-theme="light"] {
    --color-bg: #f7f4ee;
    --color-surface: #fffcf7;
    --color-text: #161412;
    --color-text-muted: #6a6458;
    --color-accent: #6d520c;
    --color-accent-hover: #6d520c;
    --color-accent-contrast: #161412;
    --color-accent-red: #b22222;
    --color-accent-red-hover: #c62b3a;
    --color-border: rgba(143, 107, 15, 0.18);
    --color-danger: #b3252f;

    --shadow-sm: 0 1px 2px rgba(22, 20, 18, 0.05);
    --shadow-md: 0 16px 40px rgba(22, 20, 18, 0.08);
    --shadow-gold: 0 0 0 1px rgba(143, 107, 15, 0.16), 0 16px 36px rgba(22, 20, 18, 0.07);

    --body-bg:
        radial-gradient(circle at 8% 0%, rgba(178, 34, 34, 0.04) 0, transparent 38%),
        radial-gradient(circle at 92% 6%, rgba(143, 107, 15, 0.07) 0, transparent 36%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cg fill='none' stroke='%238f6b0f' stroke-opacity='0.07' stroke-width='0.5'%3E%3Cellipse cx='14' cy='12' rx='11' ry='7' transform='rotate(-5 14 12)'/%3E%3Cellipse cx='42' cy='12' rx='11' ry='7' transform='rotate(5 42 12)'/%3E%3Cellipse cx='28' cy='36' rx='11' ry='7' transform='rotate(-5 28 36)'/%3E%3C/g%3E%3C/svg%3E"),
        #f7f4ee;

    --nav-bg: rgba(247, 244, 238, 0.78);
    --nav-hover-bg: rgba(143, 107, 15, 0.08);
    --card-bg: rgba(255, 252, 247, 0.86);
    --card-border: rgba(143, 107, 15, 0.16);
    --card-shadow: var(--shadow-gold);
    --glass-bg: rgba(255, 252, 247, 0.78);
    --glass-border: rgba(143, 107, 15, 0.18);
    --section-bg: rgba(255, 252, 247, 0.64);
    --section-shadow: none;
    --subtle-bg: #f3efe6;
    --callout-bg: linear-gradient(135deg, rgba(143, 107, 15, 0.10), rgba(143, 107, 15, 0.02));
    --row-hover: rgba(143, 107, 15, 0.06);
    --input-bg: #fffcf7;
    --input-border: rgba(143, 107, 15, 0.22);
    --focus-ring: rgba(143, 107, 15, 0.24);

    --brand-color: var(--color-accent);
    --hero-bg: linear-gradient(180deg, #fffcf7 0%, #f3ead6 100%);
    --hero-border: 1px solid rgba(143, 107, 15, 0.28);
    --hero-radius: 0 0 var(--radius-lg) var(--radius-lg);
    --hero-heading-color: #161412;
    --hero-logo-filter: invert(1) brightness(0.18);
    --logo-filter: invert(1) brightness(0.18);

    --btn-primary-bg: #c9a227;
    --btn-primary-color: #161412;
    --btn-primary-hover: #e0bc4a;
    --btn-secondary-bg: transparent;
    --btn-secondary-color: var(--color-text);
    --btn-secondary-border: rgba(143, 107, 15, 0.32);
    --footer-bg: rgba(247, 244, 238, 0.92);
}