/* ═══════════════════════════════════════════════════════════════
   JMAC Web — Design Tokens
   Brand palette, surfaces, typography, motion, glow, spacing.
   Light-mode defaults in :root, dark-mode overrides below.
   ═══════════════════════════════════════════════════════════════ */

/* ── Brand Design Tokens ─────────────────────────────────────── */
:root {
    /* Brand palette — dark berry → dark teal (matches logo) */
    --brand-primary: #0f172a;
    --brand-accent: #5B2D8E;
    --brand-accent-hover: #4A2275;
    --brand-secondary: #1A6B7A;

    /* Override Bootstrap primary to match brand */
    --bs-primary: #5B2D8E;
    --bs-primary-rgb: 91, 45, 142;
    --bs-link-color: #5B2D8E;
    --bs-link-color-rgb: 91, 45, 142;
    --bs-link-hover-color: #4A2275;
    --bs-link-hover-color-rgb: 74, 34, 117;
    --brand-tertiary: #1E7D8E;
    --brand-gradient: linear-gradient(135deg, #5B2D8E, #3D2272, #1A6B7A);
    --brand-gradient-subtle: linear-gradient(135deg, rgba(91,45,142,0.08), rgba(26,107,122,0.08));

    /* Surfaces — light mode defaults */
    --surface-bg: #ffffff;
    --surface-raised: #f8fafc;
    --surface-muted: #f1f5f9;
    --surface-border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-on-brand: #ffffff;

    /* Navbar — theme-aware (light defaults) */
    --nav-link-color: #fff;
    --nav-link-hover: rgba(255, 255, 255, 0.85);
    --nav-link-active: #fff;
    --nav-scrolled-link-color: #0f172a;
    --nav-scrolled-link-hover: #5B2D8E;
    --nav-scrolled-link-active: #5B2D8E;
    --nav-icon-bar-color: #fff;
    --nav-scrolled-icon-bar-color: #0f172a;
    --nav-toggle-color: #fff;
    --nav-toggle-border: rgba(255, 255, 255, 0.3);
    --nav-scrolled-toggle-color: #475569;
    --nav-scrolled-toggle-border: #e2e8f0;

    /* Buttons */
    --btn-outline-text: #5B2D8E;
    --btn-outline-icon: #5B2D8E;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* Glow effects */
    --glow-primary: 0 0 20px rgba(91, 45, 142, 0.3);
    --glow-accent: 0 0 30px rgba(26, 107, 122, 0.25);

    /* Spacing */
    --section-padding: 5rem 0;
    --section-padding-sm: 3rem 0;

    /* Navbar */
    --navbar-height: 4rem;
}

/* ── Rotating Gradient Border (animated @property) ───────────── */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes glow-border-spin {
    to { --glow-angle: 360deg; }
}

/* ── Dark Mode Tokens ────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --surface-bg: #0f172a;
    --surface-raised: #1e293b;
    --surface-muted: #334155;
    --surface-border: #475569;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;

    /* Dark navbar — text is always white */
    --nav-link-color: rgba(255, 255, 255, 0.85);
    --nav-link-hover: #fff;
    --nav-link-active: #fff;
    --nav-scrolled-link-color: rgba(255, 255, 255, 0.85);
    --nav-scrolled-link-hover: #fff;
    --nav-scrolled-link-active: #fff;
    --nav-icon-bar-color: #f1f5f9;
    --nav-scrolled-icon-bar-color: #f1f5f9;
    --nav-toggle-color: #cbd5e1;
    --nav-toggle-border: #475569;
    --nav-scrolled-toggle-color: #cbd5e1;
    --nav-scrolled-toggle-border: #475569;

    /* Dark buttons — white text on outline */
    --btn-outline-text: #fff;
    --btn-outline-icon: #fff;

    /* Override Bootstrap link colors for dark mode */
    --bs-link-color: #c4b5fd;
    --bs-link-color-rgb: 196, 181, 253;
    --bs-link-hover-color: #e9d5ff;
    --bs-link-hover-color-rgb: 233, 213, 255;
}