/* ==========================================================================
   Mamba Jiu Jitsu — light & dark modes
   A single design in two modes, switched by the user via the navbar toggle
   (persisted in localStorage; falls back to the OS preference). Shared
   typography/shape tokens live in :root; each mode overrides color, surface,
   and the woven background pattern. Pairs with theme-base.css.
   ========================================================================== */

/* -------- Shared tokens (identical across both modes) -------- */
: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: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --max-width: 1080px;
}

/* ------------------------------ Dark mode ------------------------------ */
[data-theme="dark"] {
    --color-bg: #0c0d0e;
    --color-surface: #141517;
    --color-text: #f4f2ec;
    --color-text-muted: #9a978f;
    --color-accent: #d4af37;
    --color-accent-hover: #e6c458;
    --color-accent-contrast: #0c0d0e;
    --color-accent-red: #b22222;
    --color-accent-red-hover: #c62b3a;
    --color-border: #26282c;
    --color-danger: #e0736e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.45);

    /* Woven "gi weave" pattern (gold) + soft red/gold corner glows */
    --body-bg:
        radial-gradient(circle at 5% 0%, rgba(178, 34, 34, 0.14) 0, transparent 42%),
        radial-gradient(circle at 95% 8%, rgba(212, 175, 55, 0.10) 0, transparent 40%),
        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='%23d4af37' stroke-opacity='0.16' stroke-width='0.55'%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%3Cellipse cx='0' cy='36' rx='10' ry='6' transform='rotate(5 0 36)'/%3E%3Cellipse cx='56' cy='36' rx='10' ry='6' transform='rotate(-5 56 36)'/%3E%3C/g%3E%3C/svg%3E"),
        #0c0d0e;

    --nav-bg: rgba(12, 13, 14, 0.82);
    --nav-hover-bg: rgba(212, 175, 55, 0.12);
    --card-bg: #141517;
    --card-border: #26282c;
    --card-shadow: var(--shadow-md);
    --section-bg: #17181b;
    --section-shadow: none;
    --subtle-bg: #101113;
    --callout-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02));
    --row-hover: rgba(212, 175, 55, 0.06);
    --input-bg: #0f1012;
    --input-border: #2c2f34;
    --focus-ring: rgba(212, 175, 55, 0.28);

    --brand-color: var(--color-accent);
    --hero-bg: radial-gradient(120% 140% at 50% 0%, #1b1c1f 0%, #0c0d0e 68%);
    --hero-border: 1px solid var(--color-accent);
    --hero-radius: 0 0 var(--radius-lg) var(--radius-lg);
    --hero-heading-color: #f4f2ec;
    --hero-logo-filter: sepia(0.6) saturate(3) hue-rotate(12deg) brightness(1.05);
    --logo-filter: none;

    --btn-primary-bg: var(--color-accent);
    --btn-primary-color: #0c0d0e;
    --btn-primary-hover: var(--color-accent-hover);
    --btn-secondary-bg: transparent;
    --btn-secondary-color: var(--color-text);
    --btn-secondary-border: var(--color-border);
}

/* ------------------------------ Light mode ----------------------------- */
[data-theme="light"] {
    --color-bg: #f4f1ea;
    --color-surface: #ffffff;
    --color-text: #1a1815;
    --color-text-muted: #6f675a;
    --color-accent: #a67c12;
    --color-accent-hover: #c1942a;
    --color-accent-contrast: #1a1815;
    --color-accent-red: #b22222;
    --color-accent-red-hover: #c62b3a;
    --color-border: #e6e0d4;
    --color-danger: #b3252f;

    --shadow-sm: 0 1px 2px rgba(40, 35, 25, 0.05);
    --shadow-md: 0 12px 34px rgba(40, 35, 25, 0.08);

    /* Same woven pattern, tinted for a light canvas + faint warm glows */
    --body-bg:
        radial-gradient(circle at 5% 0%, rgba(178, 34, 34, 0.06) 0, transparent 42%),
        radial-gradient(circle at 95% 8%, rgba(166, 124, 18, 0.08) 0, transparent 40%),
        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='%23a67c12' stroke-opacity='0.18' stroke-width='0.55'%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%3Cellipse cx='0' cy='36' rx='10' ry='6' transform='rotate(5 0 36)'/%3E%3Cellipse cx='56' cy='36' rx='10' ry='6' transform='rotate(-5 56 36)'/%3E%3C/g%3E%3C/svg%3E"),
        #f4f1ea;

    --nav-bg: rgba(244, 241, 234, 0.82);
    --nav-hover-bg: rgba(166, 124, 18, 0.10);
    --card-bg: #ffffff;
    --card-border: #e6e0d4;
    --card-shadow: var(--shadow-md);
    --section-bg: #ffffff;
    --section-shadow: none;
    --subtle-bg: #faf8f2;
    --callout-bg: linear-gradient(135deg, rgba(166, 124, 18, 0.10), rgba(166, 124, 18, 0.02));
    --row-hover: rgba(166, 124, 18, 0.06);
    --input-bg: #ffffff;
    --input-border: #dcd5c6;
    --focus-ring: rgba(166, 124, 18, 0.22);

    --brand-color: var(--color-accent);
    --hero-bg: linear-gradient(180deg, #ffffff 0%, #f5efe2 100%);
    --hero-border: 1px solid var(--color-accent);
    --hero-radius: 0 0 var(--radius-lg) var(--radius-lg);
    --hero-heading-color: #1a1815;
    --hero-logo-filter: invert(1) brightness(0.2);
    --logo-filter: invert(1) brightness(0.2);

    --btn-primary-bg: var(--color-accent);
    --btn-primary-color: #1a1815;
    --btn-primary-hover: var(--color-accent-hover);
    --btn-secondary-bg: transparent;
    --btn-secondary-color: var(--color-text);
    --btn-secondary-border: var(--color-border);
}