/* Global CSS Variables & Design Tokens */
:root {
    /* ===== COLOR PALETTE ===== */
    --primary-color: #2ea043;
    --primary-hover: #238636;
    --primary-light: #3fb950;
    --bg-dark: #0d1117;
    --bg-card: #161b22;
    --bg-light: #f6f8fa;
    --border-color: #30363d;
    --border-light: #d0d7de;
    --text-color: #e6edf3;
    --text-primary: #1f2328;
    --text-muted: #8b949e;
    --text-muted-light: #656d76;
    --error-color: #f85149;
    --error-bg: #3d1a1a;
    --error-light: #cf222e;
    --success-color: #57ab5a;
    --success-bg: #0d4429;
    --success-dark: #1a7f37;
    --warning-color: #d29922;
    --warning-bg: #3d2e00;
    --warning-light: #9a6700;
    --warning-lightest: #fff8c5;

    /* ===== GRADIENTS ===== */
    --gradient-hero: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1a2332 100%);
    --gradient-accent: linear-gradient(135deg, #2ea043 0%, #1a7f37 100%);
    --gradient-accent-light: linear-gradient(135deg, #3fb950 0%, #2ea043 100%);
    --gradient-text: linear-gradient(135deg, #3fb950 0%, #2ea043 100%);

    /* ===== SHADOWS ===== */
    --shadow-glow: 0 0 30px rgba(46, 160, 67, 0.3);
    --shadow-glow-strong: 0 0 80px rgba(46, 160, 67, 0.4);
    --shadow-glow-inset: inset 0 0 30px rgba(46, 160, 67, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 80px rgba(46, 160, 67, 0.4);

    /* ===== TYPOGRAPHY ===== */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.2rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    --line-height-normal: 1.6;
    --line-height-tight: 1.4;

    /* ===== SPACING ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 30px;
    --spacing-3xl: 40px;
    --spacing-4xl: 60px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 5px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 50%;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --transition-slower: 0.6s;
    --transition-slowest: 0.8s;
    --transition-timing: ease;
    --transition-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== Z-INDEX ===== */
    --z-dropdown: 500;
    --z-topbar: 100;
    --z-navbar: 1000;
    --z-modal: 1000;
    --z-tooltip: 1100;
    --z-modal-overlay: 2000;
}

/* Light theme overrides */
[data-theme="light"] {
    --bg-dark: #ffffff;
    --bg-card: #f6f8fa;
    --border-color: #d0d7de;
    --text-color: #1f2328;
    --text-muted: #656d76;
    --error-bg: #ffeef0;
    --success-bg: #dafbe1;
    --warning-bg: #fff8c5;
}