/* =========================================
   KREVIA - CSS Variables & Reset
   ========================================= */

:root {
    /* Background */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #111111;
    --bg-hover: #1a1a1a;
    --bg-input: #0a0a0a;

    /* Text */
    --text-primary: #e8e8e8;
    --text-secondary: #888888;
    --text-muted: #555555;

    /* Borders */
    --border-color: #222222;
    --border-light: #333333;

    /* Accent */
    --accent: #C8FF00;
    --accent-hover: #b3e600;
    --accent-light: rgba(200, 255, 0, 0.10);
    --accent-text: #0a0a0a;

    /* Semantic Colors */
    --blue: #3b82f6;
    --blue-light: rgba(59, 130, 246, 0.15);
    --green: #22c55e;
    --green-light: rgba(34, 197, 94, 0.15);
    --red: #ef4444;
    --red-light: rgba(239, 68, 68, 0.15);
    --yellow: #eab308;
    --yellow-light: rgba(234, 179, 8, 0.15);
    --orange: #f97316;
    --orange-light: rgba(249, 115, 22, 0.15);
    --purple: #a855f7;
    --purple-light: rgba(168, 85, 247, 0.15);
    --gray: #6b7280;
    --gray-light: rgba(107, 114, 128, 0.15);

    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);

    /* Transition */
    --transition: all 0.2s ease;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eeeeee;
    --bg-card: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-input: #ffffff;
    --text-primary: #111111;
    --text-secondary: #555555;
    --text-muted: #999999;
    --border-color: #e0e0e0;
    --border-light: #d0d0d0;
    --accent: #9abf00;
    --accent-hover: #82a300;
    --accent-light: rgba(154, 191, 0, 0.12);
    --accent-text: #111111;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }