/* ========================================
   CSS Variables - Design System Tokens
   Antigravity Clean Professional Light Mode
   ======================================== */

/* Import Google Fonts - Manrope */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* ---- Primary Colors ---- */
    --primary: #137fec;
    --primary-hover: #0d6edb;
    --primary-light: #e0f2fe;

    /* ---- Background Colors ---- */
    --background: #ffffff;
    --background-subtle: #f6f7f8;
    --background-muted: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;

    /* ---- Text Colors ---- */
    --text-primary: #0d141b;
    --text-body: #1f2937;
    --text-secondary: #475569;
    --text-muted: #4c739a;
    --text-light: #9ca3af;
    --color-text: #0d141b;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;

    /* ---- Border Colors ---- */
    --border: #e7edf3;
    --border-default: #e2e8f0;
    --border-hover: #cfdbe7;
    --glass-border: #e2e8f0;

    /* ---- Accent Colors ---- */
    --accent: #10b981;
    --accent-light: #d1fae5;

    /* ---- Gradient Definitions ---- */
    --gradient-primary: linear-gradient(135deg, #137fec 0%, #0ea5e9 100%);
    --gradient-text: linear-gradient(135deg, #137fec 0%, #0ea5e9 50%, #06b6d4 100%);
    --gradient-card: linear-gradient(135deg, rgba(19, 127, 236, 0.05) 0%, rgba(14, 165, 233, 0.02) 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(19, 127, 236, 0.1) 0%, transparent 70%);

    /* ---- Glass Effect ---- */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-blue: 0 4px 14px rgba(19, 127, 236, 0.25);
    --shadow-blue-lg: 0 10px 25px rgba(19, 127, 236, 0.2);
    --shadow-card-hover: 0 20px 40px rgba(19, 127, 236, 0.08);

    /* ---- Spacing ---- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ---- Typography ---- */
    --font-main: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* ---- Line Heights ---- */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ---- Border Radius ---- */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ---- Transitions ---- */
    --transition-fast: 100ms ease-out;
    --transition-base: 150ms ease-out;
    --transition-slow: 200ms ease-out;
    --transition-spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Z-index Scale ---- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* ---- Container ---- */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* ---- Legacy color aliases for compatibility ---- */
    --color-bg: var(--background);
    --color-bg-elevated: var(--bg-elevated);
    --color-bg-card: var(--bg-card);
    --color-primary: var(--primary);
    --color-primary-light: #3b9eff;
    --color-primary-dark: var(--primary-hover);
    --color-accent: var(--accent);
    --color-accent-light: var(--accent-light);
}

/* ========================================
   Dark Theme Variables (Optional Override)
   ======================================== */
[data-theme="dark"] {
    --background: #0f172a;
    --background-subtle: #1e293b;
    --background-muted: #1e293b;
    --bg-elevated: #1e293b;
    --bg-card: #1e293b;

    --text-primary: #f8fafc;
    --text-body: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;

    --border: #334155;
    --border-default: #334155;
    --glass-border: #334155;
    --glass-bg: rgba(30, 41, 59, 0.8);

    --color-bg: var(--background);
    --color-bg-elevated: var(--bg-elevated);
}