/*
 * TheRobotInsider Design Tokens
 * Dark-first design system — Dark Tech style
 * Spec: docs/superpowers/specs/2026-06-05-design-system-shell-design.md
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Dark Mode (Default)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Background ─────────────────────────────────────────── */
    --bg-base: #0a0a0f;
    --bg-surface: #111118;
    --bg-elevated: #1a1a24;
    --bg-overlay: #22222e;

    /* ── Accent ─────────────────────────────────────────────── */
    --accent: #e85d04;
    --accent-hover: #ff7a1a;
    --accent-subtle: rgba(232, 93, 4, 0.12);
    --accent-border: rgba(232, 93, 4, 0.25);
    --accent-warm: #f59e0b;
    --accent-success: #22c55e;
    --accent-danger: #ef4444;
    --accent-rgb: 232 93 4;

    /* ── Category Colors ────────────────────────────────────── */
    --cat-service: #e85d04;
    --cat-service-subtle: rgba(232, 93, 4, 0.10);
    --cat-service-border: rgba(232, 93, 4, 0.25);
    --cat-industrial: #3b82f6;
    --cat-industrial-subtle: rgba(59, 130, 246, 0.10);
    --cat-industrial-border: rgba(59, 130, 246, 0.25);
    --cat-toys: #22c55e;
    --cat-toys-subtle: rgba(34, 197, 94, 0.10);
    --cat-toys-border: rgba(34, 197, 94, 0.25);
    --cat-diy: #a855f7;
    --cat-diy-subtle: rgba(168, 85, 247, 0.10);
    --cat-diy-border: rgba(168, 85, 247, 0.25);
    --cat-reports: #06b6d4;
    --cat-reports-subtle: rgba(6, 182, 212, 0.10);
    --cat-reports-border: rgba(6, 182, 212, 0.25);

    /* ── Text ───────────────────────────────────────────────── */
    --text-primary: #f5f5f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-disabled: rgba(255, 255, 255, 0.3);

    /* ── Border ─────────────────────────────────────────────── */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(232, 93, 4, 0.3);

    /* ── Typography ─────────────────────────────────────────── */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-display: clamp(2.5rem, 5vw, 3.75rem);
    --text-h1: clamp(1.75rem, 3.5vw, 2.25rem);
    --text-h2: clamp(1.25rem, 2vw, 1.5rem);
    --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 ──────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* ── 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: 1440px;
    --header-height: 64px;
    --header-height-mobile: 56px;

    /* ── Semantic / Legacy Aliases ──────────────────────────── */
    --bg-subtle: var(--bg-surface);
    --bg-card: var(--bg-surface);
    --bg-dark: var(--bg-base);
    --glass-bg: rgba(17, 17, 24, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    --header-bg: rgba(10, 10, 15, 0.85);
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.1);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.1);
    --danger-bg: rgba(239, 68, 68, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.1);
    --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: linear-gradient(135deg, var(--accent) 0%, var(--accent-warm) 100%);

    /* ── Hero ───────────────────────────────────────────────── */
    --hero-bg: linear-gradient(135deg, #0c1220 0%, #151b30 35%, #1a1030 65%, #201525 100%);
    --hero-dot-color: rgba(255, 255, 255, 0.06);
    --hero-badge-bg: rgba(255, 255, 255, 0.07);
    --hero-badge-border: rgba(255, 255, 255, 0.12);
    --hero-badge-hover-bg: rgba(255, 255, 255, 0.1);
    --hero-badge-hover-border: rgba(255, 255, 255, 0.2);
    --hero-title-color: #f9fafb;
    --hero-desc-color: #9ca3af;
    --hero-btn-secondary-bg: rgba(255, 255, 255, 0.06);
    --hero-btn-secondary-border: rgba(255, 255, 255, 0.12);
    --hero-btn-secondary-color: #e5e7eb;
    --hero-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1);
    --hero-btn-secondary-hover-border: rgba(255, 255, 255, 0.25);
    --hero-btn-secondary-hover-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg-base: #ffffff;
    --bg-surface: #f9fafb;
    --bg-elevated: #f3f4f6;
    --bg-overlay: #e5e7eb;

    --accent-hover: #c44e03;
    --accent-subtle: #fff7ed;
    --accent-border: rgba(232, 93, 4, 0.25);

    --text-primary: #141414;
    --text-secondary: #525252;
    --text-muted: #9ca3af;
    --text-disabled: rgba(0, 0, 0, 0.3);

    --border-default: #e5e7eb;
    --border-subtle: #d1d5db;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --header-bg: rgba(255, 255, 255, 0.85);
    --success-light: #f0fdf4;
    --danger-light: #fef2f2;
    --danger-bg: #fef2f2;
    --warning-light: #fef9c3;
    --info-light: #eff6ff;

    /* ── Hero (Light) ───────────────────────────────────────── */
    --hero-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 35%, #eef2ff 65%, #faf5ff 100%);
    --hero-dot-color: rgba(0, 0, 0, 0.04);
    --hero-badge-bg: rgba(0, 0, 0, 0.04);
    --hero-badge-border: rgba(0, 0, 0, 0.08);
    --hero-badge-hover-bg: rgba(0, 0, 0, 0.07);
    --hero-badge-hover-border: rgba(0, 0, 0, 0.14);
    --hero-title-color: #0f172a;
    --hero-desc-color: #475569;
    --hero-btn-secondary-bg: rgba(0, 0, 0, 0.04);
    --hero-btn-secondary-border: rgba(0, 0, 0, 0.1);
    --hero-btn-secondary-color: #334155;
    --hero-btn-secondary-hover-bg: rgba(0, 0, 0, 0.08);
    --hero-btn-secondary-hover-border: rgba(0, 0, 0, 0.18);
    --hero-btn-secondary-hover-color: #0f172a;
}