/* Design Tokens — Mijn Rimote
   Dual-theme CSS variables (dark default, light via toggle).
   --r-* tokens = universal (all surfaces)
   --m-* tokens = carried over from modern.css for compatibility
   --ws-* tokens = webshop-specific (aliased to --r-* where possible) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════
   Shared tokens — theme-independent
   ══════════════════════════════════════════════ */
:root {
    /* ── Font ── */
    --r-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --m-font: var(--r-font);

    /* ── Primary — Rimote blue ── */
    --r-primary: #0078B3;
    --r-primary-dark: #006A9F;
    --r-primary-light: #D5E9FA;
    --r-primary-50: #EBF5FC;
    --r-primary-bright: #098CCE;

    /* Aliases for --m-* compatibility */
    --m-primary: var(--r-primary);
    --m-primary-dark: var(--r-primary-dark);
    --m-primary-light: var(--r-primary-light);
    --m-primary-50: var(--r-primary-50);
    --m-primary-bright: var(--r-primary-bright);

    /* ── Semantic ── */
    --r-success: #10b981;
    --r-warning: #f59e0b;
    --r-danger: #ef4444;
    --m-success: var(--r-success);
    --m-warning: var(--r-warning);
    --m-danger: var(--r-danger);

    /* ── Gray scale ── */
    --m-gray-50: #f9fafb;
    --m-gray-100: #f3f4f6;
    --m-gray-200: #e5e7eb;
    --m-gray-300: #d1d5db;
    --m-gray-400: #9ca3af;
    --m-gray-500: #6b7280;
    --m-gray-600: #4b5563;
    --m-gray-700: #374151;
    --m-gray-800: #1f2937;
    --m-gray-900: #111827;

    /* ── Gradients & effects ── */
    --r-gradient: linear-gradient(135deg, #0078B3 0%, #10b981 100%);
    --ws-gradient: var(--r-gradient);
    --r-glow: 0 0 40px rgba(0, 120, 179, 0.1);
    --r-glow-strong: 0 0 30px rgba(0, 120, 179, 0.4);

    /* ── Layout ── */
    --r-max-width: 1400px;
    --r-sidebar-width: 240px;
    --r-gap: 2rem;

    /* ── Radius ── */
    --r-radius: 12px;
    --r-radius-sm: 8px;
    --r-radius-lg: 16px;
    --m-radius: var(--r-radius);
    --m-radius-sm: var(--r-radius-sm);
    --m-radius-lg: var(--r-radius-lg);

    /* ── Transitions ── */
    --r-transition: 0.2s ease;

    /* ── Bootstrap 5 overrides ──
       Map Bootstrap CSS variables to our tokens */
    --bs-body-bg: var(--r-bg);
    --bs-body-color: var(--r-text);
    --bs-body-font-family: var(--r-font);
    --bs-border-color: var(--r-border);
    --bs-card-bg: var(--r-card);
    --bs-primary: var(--r-primary);
    --bs-success: var(--r-success);
    --bs-warning: var(--r-warning);
    --bs-danger: var(--r-danger);
    --bs-secondary-bg: var(--r-elevated);
    --bs-tertiary-bg: var(--r-hover);
    --bs-link-color: var(--r-primary);
    --bs-link-hover-color: var(--r-primary-bright);

    /* ── Alias shadows for --m-* compat ── */
    --m-shadow-sm: var(--r-shadow-sm);
    --m-shadow: var(--r-shadow);
    --m-shadow-md: var(--r-shadow-md);
    --m-shadow-lg: var(--r-shadow-lg);
    --m-shadow-xl: var(--r-shadow-xl);
}

/* ══════════════════════════════════════════════
   Dark theme
   ══════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    /* ── Palette ── */
    --r-bg: #0a0a0a;
    --r-card: #1e1e1e;
    --r-elevated: #2a2a2a;
    --r-hover: #333333;
    --r-border: #2a2a2a;
    --r-border-hover: #3a3a3a;
    --r-text: #ffffff;
    --r-text-secondary: #c7c7cf;
    --r-text-muted: #71717a;

    /* ── Links ── */
    --r-link-hover: #D5E9FA;

    /* ── Overlays ── */
    --r-overlay: rgba(0, 0, 0, 0.4);
    --r-overlay-heavy: rgba(0, 0, 0, 0.8);
    --r-header-backdrop: rgba(10, 10, 10, 0.85);

    /* ── Shadows ── */
    --r-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --r-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --r-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --r-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --r-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════
   Light theme
   ══════════════════════════════════════════════ */
[data-bs-theme="light"] {
    /* ── Palette ── */
    --r-bg: #f5f5f5;
    --r-card: #ffffff;
    --r-elevated: #ffffff;
    --r-hover: #eaeaea;
    --r-border: #d8d8d8;
    --r-border-hover: #c0c0c0;
    --r-text: #1a1a1a;
    --r-text-secondary: #444444;
    --r-text-muted: #707070;

    /* ── Links ── */
    --r-link-hover: #005a8a;

    /* ── Overlays ── */
    --r-overlay: rgba(0, 0, 0, 0.2);
    --r-overlay-heavy: rgba(0, 0, 0, 0.5);
    --r-header-backdrop: rgba(10, 10, 10, 0.85);

    /* ── Shadows ── */
    --r-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --r-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --r-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --r-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --r-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* ══════════════════════════════════════════════
   Webshop overrides (per theme)
   ══════════════════════════════════════════════ */
body.webshop {
    --r-success: #00D4AA;
    --r-gradient: linear-gradient(135deg, #0078B3 0%, #10b981 100%);
    --r-glow: 0 0 40px rgba(0, 120, 179, 0.1);
    --r-glow-strong: 0 0 30px rgba(0, 120, 179, 0.4);
    --r-max-width: 1280px;

    /* Webshop-specific aliases for backward compat */
    --ws-bg: var(--r-bg);
    --ws-card: var(--r-card);
    --ws-elevated: var(--r-elevated);
    --ws-hover: var(--r-hover);
    --ws-border: var(--r-border);
    --ws-border-hover: var(--r-border-hover);
    --ws-text: var(--r-text);
    --ws-text-secondary: var(--r-text-secondary);
    --ws-text-muted: var(--r-text-muted);
    --ws-gradient: var(--r-gradient);
    --ws-glow: var(--r-glow);
    --ws-glow-strong: var(--r-glow-strong);
    --ws-max-width: var(--r-max-width);
}

/* Webshop dark — slightly lighter surfaces than default dark */
[data-bs-theme="dark"] body.webshop {
    --r-card: #282828;
    --r-elevated: #3c3c3c;
    --r-hover: #484848;
    --r-border: #4a4a4a;
    --r-border-hover: #5a5a5a;
}

/* Webshop light */
[data-bs-theme="light"] body.webshop {
    --r-card: #ffffff;
    --r-elevated: #ffffff;
    --r-hover: #f0f0f0;
    --r-border: #d8d8d8;
    --r-border-hover: #c0c0c0;
}

/* ══════════════════════════════════════════════
   Header & footer — always dark regardless of theme
   ══════════════════════════════════════════════ */
#header_wrapper,
.ws-footer {
    --r-bg: #0a0a0a;
    --r-card: #1e1e1e;
    --r-elevated: #2a2a2a;
    --r-hover: #333333;
    --r-border: #2a2a2a;
    --r-border-hover: #3a3a3a;
    --r-text: #ffffff;
    --r-text-secondary: #c7c7cf;
    --r-text-muted: #71717a;
    --r-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════
   Admin overrides
   ══════════════════════════════════════════════ */
body.surface-admin {
    --r-max-width: 1660px;
}