/* FlowNex - CSS Custom Properties (Themes Dark/Light) */

:root {
    /* Light theme (default) */
    --bg-primary: #f8f9fc;
    --bg-secondary: #f1f3f9;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.4);

    --text-primary: #1a1d26;
    --text-secondary: #5f6880;
    --text-muted: #9ca3b8;
    --text-inverse: #ffffff;

    --border: #e3e6ee;
    --border-light: #eff1f6;
    --border-focus: #0f62fe;

    --accent: #0f62fe;
    --accent-dark: #0043ce;
    --accent-light: #4589ff;
    --accent-bg: rgba(15, 98, 254, 0.07);
    --accent-shadow: rgba(15, 98, 254, 0.30);

    --success: #10b981;
    --success-bg: #d1fae5;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --danger: #ef4444;
    --danger-bg: #fee2e2;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    --bg-primary: #0f1117;
    --bg-secondary: #16181f;
    --bg-surface: #1c1e27;
    --bg-elevated: #242630;
    --bg-overlay: rgba(0, 0, 0, 0.6);

    --text-primary: #eef0f6;
    --text-secondary: #9ca3b8;
    --text-muted: #5f6880;
    --text-inverse: #1a1d26;

    --border: #2a2d38;
    --border-light: #1f2129;
    --border-focus: #4589ff;

    --accent: #4589ff;
    --accent-dark: #0f62fe;
    --accent-light: #78a9ff;
    --accent-bg: rgba(69, 137, 255, 0.1);
    --accent-shadow: rgba(69, 137, 255, 0.25);

    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.5);
}

/* Typography */
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;

    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Spacing */
:root {
    --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;
}

/* Border radius */
:root {
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
}

/* Transitions */
:root {
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-sheet: 350ms cubic-bezier(0.32, 0.72, 0, 1);
}