/*
 * TheRobotInsider Design Tokens
 * Light-first, vibrant, playful — inspired by aitoys.co.uk
 * Glass-card UI + animated gradients + generous rounded corners
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Light Mode (Default)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Background ─────────────────────────────────────────── */
    --bg-base: #f8faff;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-overlay: #e2e8f0;

    /* ── Accent (Vibrant Purple-Blue) ───────────────────────── */
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-subtle: rgba(99, 102, 241, 0.08);
    --accent-border: rgba(99, 102, 241, 0.2);
    --accent-rgb: 99 102 241;

    /* ── Vibrant Gradient Palette ───────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --gradient-warm: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
    --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #a855f7 100%);
    --gradient-sunset: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ec4899 100%);
    --gradient-text: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #f97316);

    --accent-warm: #f97316;
    --accent-success: #10b981;
    --accent-danger: #ef4444;
    --accent-pink: #ec4899;
    --accent-cyan: #06b6d4;

    /* ── Category Colors (Vibrant) ──────────────────────────── */
    --cat-service: #f97316;
    --cat-service-subtle: rgba(249, 115, 22, 0.08);
    --cat-service-border: rgba(249, 115, 22, 0.2);
    --cat-industrial: #3b82f6;
    --cat-industrial-subtle: rgba(59, 130, 246, 0.08);
    --cat-industrial-border: rgba(59, 130, 246, 0.2);
    --cat-toys: #10b981;
    --cat-toys-subtle: rgba(16, 185, 129, 0.08);
    --cat-toys-border: rgba(16, 185, 129, 0.2);
    --cat-diy: #a855f7;
    --cat-diy-subtle: rgba(168, 85, 247, 0.08);
    --cat-diy-border: rgba(168, 85, 247, 0.2);
    --cat-reports: #06b6d4;
    --cat-reports-subtle: rgba(6, 182, 212, 0.08);
    --cat-reports-border: rgba(6, 182, 212, 0.2);

    /* ── Text ───────────────────────────────────────────────── */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-disabled: rgba(0, 0, 0, 0.25);

    /* ── Border ─────────────────────────────────────────────── */
    --border-default: rgba(0, 0, 0, 0.06);
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-accent: rgba(99, 102, 241, 0.25);

    /* ── Typography ─────────────────────────────────────────── */
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-display: clamp(2.75rem, 5.5vw, 4.5rem);
    --text-h1: clamp(1.75rem, 3.5vw, 2.5rem);
    --text-h2: clamp(1.375rem, 2.5vw, 1.75rem);
    --text-h3: 1.125rem;
    --text-body: 0.9375rem;
    --text-small: 0.8125rem;
    --text-label: 0.6875rem;

    /* ── Spacing (4px base) ─────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ── Border Radius (Generous, Playful) ──────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 999px;

    /* ── Shadows (Softer, more diffused) ────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);

    /* ── Glass ──────────────────────────────────────────────── */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 20px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);

    /* ── Motion ─────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ── Layout ─────────────────────────────────────────────── */
    --container: 1280px;
    --header-height: 72px;
    --header-height-mobile: 60px;

    /* ── Hero ───────────────────────────────────────────────── */
    --hero-bg: linear-gradient(135deg, #f8faff 0%, #ede9fe 25%, #fce7f3 50%, #fff7ed 75%, #f0fdfa 100%);
    --hero-dot-color: rgba(99, 102, 241, 0.06);
    --hero-badge-bg: rgba(255, 255, 255, 0.7);
    --hero-badge-border: rgba(99, 102, 241, 0.15);
    --hero-badge-hover-bg: rgba(255, 255, 255, 0.9);
    --hero-badge-hover-border: rgba(99, 102, 241, 0.3);
    --hero-title-color: #0f172a;
    --hero-desc-color: #475569;

    /* ── Semantic Aliases ───────────────────────────────────── */
    --bg-subtle: var(--bg-elevated);
    --bg-card: var(--bg-surface);
    --bg-dark: #0f172a;
    --header-bg: rgba(248, 250, 255, 0.8);
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.08);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.08);
    --danger-bg: rgba(239, 68, 68, 0.08);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.08);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.08);
    --shadow-xl: var(--shadow-lg);
    --ease-out-expo: var(--ease-out);
    --transition: var(--duration-fast) var(--ease-out);
    --transition-base: var(--duration-normal) var(--ease-out);
    --gradient-accent: var(--gradient-primary);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg-base: #0a0a0f;
    --bg-surface: #111118;
    --bg-elevated: #1a1a24;
    --bg-overlay: #22222e;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-disabled: rgba(255, 255, 255, 0.25);

    --border-default: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-accent: rgba(99, 102, 241, 0.3);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.2);

    --glass-bg: rgba(17, 17, 24, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    --header-bg: rgba(10, 10, 15, 0.85);
    --success-light: rgba(16, 185, 129, 0.1);
    --danger-light: rgba(239, 68, 68, 0.1);
    --danger-bg: rgba(239, 68, 68, 0.1);
    --warning-light: rgba(245, 158, 11, 0.1);
    --info-light: rgba(59, 130, 246, 0.1);

    --hero-bg: linear-gradient(135deg, #0c1220 0%, #1a1030 35%, #201525 65%, #0c1a20 100%);
    --hero-dot-color: rgba(99, 102, 241, 0.08);
    --hero-badge-bg: rgba(255, 255, 255, 0.06);
    --hero-badge-border: rgba(99, 102, 241, 0.2);
    --hero-badge-hover-bg: rgba(255, 255, 255, 0.1);
    --hero-badge-hover-border: rgba(99, 102, 241, 0.35);
    --hero-title-color: #f1f5f9;
    --hero-desc-color: #94a3b8;
}