/* ================================================================
   RegulAI Design System — CSS Variables (Dark Theme)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Primary Palette (Material Design 3 — Deep Purple + Teal) ── */
    --primary: #6C63FF;
    /* MD3 Primary */
    --primary-light: #8B83FF;
    /* MD3 Primary-80 */
    --primary-dark: #4A42DB;
    /* MD3 Primary-40 */
    --primary-glow: rgba(108, 99, 255, 0.3);
    --primary-container: rgba(108, 99, 255, 0.12);
    --on-primary: #FFFFFF;
    --on-primary-container: #E8E5FF;

    /* ── Secondary Palette ────────────────────────────────── */
    --secondary: #625B71;
    --secondary-container: rgba(98, 91, 113, 0.2);
    --on-secondary: #FFFFFF;

    /* ── Tertiary Palette ─────────────────────────────────── */
    --tertiary: #00BCD4;
    --tertiary-container: rgba(0, 188, 212, 0.12);

    /* ── Accent Colors (Material A-Series) ────────────────── */
    --accent-teal: #00E5FF;
    /* MD Cyan A400 */
    --accent-teal-glow: rgba(0, 229, 255, 0.2);
    --accent-emerald: #00E676;
    /* MD Green A400 */
    --accent-emerald-glow: rgba(0, 230, 118, 0.2);
    --accent-amber: #FFAB40;
    /* MD Orange A200 */
    --accent-amber-glow: rgba(255, 171, 64, 0.2);
    --accent-rose: #FF5252;
    /* MD Red A200 */
    --accent-rose-glow: rgba(255, 82, 82, 0.2);
    --accent-violet: #B388FF;
    /* MD Deep Purple A100 */
    --accent-pink: #FF4081;
    /* MD Pink A200 */
    --accent-lime: #EEFF41;
    /* MD Lime A200 */
    --accent-blue: #448AFF;
    /* MD Blue A200 */

    /* ── Background Layers (MD3 Surface Hierarchy) ────────── */
    --bg-deep: #060B18;
    /* Surface Dim */
    --bg-primary: #0A0F2E;
    /* Surface */
    --bg-secondary: #111640;
    /* Surface Container Low */
    --bg-tertiary: #181E52;
    /* Surface Container */
    --bg-elevated: #1E2563;
    /* Surface Container High */
    --bg-surface: rgba(17, 22, 64, 0.7);
    --surface-tint: rgba(108, 99, 255, 0.05);
    /* MD3 surface tint */
    --surface-bright: #1C2250;
    --surface-container-lowest: #070C1A;
    --surface-container-highest: #252B68;

    /* ── Glass Effect ─────────────────────────────────── */
    --glass-bg: rgba(17, 22, 64, 0.5);
    --glass-border: rgba(108, 99, 255, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --glass-blur: blur(20px);

    /* ── Text Colors (MD3 On-Surface) ─────────────────── */
    --text-primary: #FFFFFF;
    /* On Surface */
    --text-secondary: rgba(255, 255, 255, 0.7);
    /* On Surface Variant */
    --text-tertiary: rgba(255, 255, 255, 0.45);
    --text-muted: rgba(255, 255, 255, 0.3);
    --text-disabled: rgba(255, 255, 255, 0.18);

    /* ── Borders (MD3 Outline) ────────────────────────── */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    /* Outline Variant */
    --border-strong: rgba(255, 255, 255, 0.2);
    /* Outline */
    --border-accent: rgba(108, 99, 255, 0.3);

    /* ── Status Colors (Material Standard) ────────────── */
    --success: #00E676;
    /* Green A400 */
    --success-bg: rgba(0, 230, 118, 0.1);
    --warning: #FFAB40;
    /* Orange A200 */
    --warning-bg: rgba(255, 171, 64, 0.1);
    --danger: #FF5252;
    /* Red A200 */
    --danger-bg: rgba(255, 82, 82, 0.1);
    --info: #00E5FF;
    /* Cyan A400 */
    --info-bg: rgba(0, 229, 255, 0.1);

    /* ── Typography ───────────────────────────────────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-size-xs: 0.6875rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.5rem;

    /* ── Spacing (4px grid system) ────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Border Radius (MD3 Shape Scale) ──────────────── */
    --radius-sm: 6px;
    /* Extra Small */
    --radius-md: 10px;
    /* Small */
    --radius-lg: 16px;
    /* Medium */
    --radius-xl: 24px;
    /* Large */
    --radius-full: 9999px;
    /* Full */

    /* ── Shadows (MD3 Elevation) ──────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* Elevation 1 */
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    /* Elevation 2 */
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    /* Elevation 3 */
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.5);
    /* Elevation 4 */
    --shadow-glow: 0 0 40px var(--primary-glow);
    --shadow-teal-glow: 0 0 30px var(--accent-teal-glow);

    /* ── Transitions (MD3 Motion) ─────────────────────── */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Standard */
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Standard */
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Standard */
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Emphasized */
    --transition-decelerate: 300ms cubic-bezier(0, 0, 0.2, 1);
    --transition-accelerate: 200ms cubic-bezier(0.4, 0, 1, 1);

    /* ── Layout ───────────────────────────────────────── */
    --sidebar-width: 280px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --content-max-width: 1400px;

    /* ── Z-Index ──────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sidebar: 200;
    --z-header: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;

    /* ── Gradients ────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #6C63FF 0%, #00E5FF 100%);
    --gradient-hero: linear-gradient(135deg, #0A0F2E 0%, #181E52 50%, #0A0F2E 100%);
    --gradient-card: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(0, 229, 255, 0.05) 100%);
    --gradient-success: linear-gradient(135deg, #00E676 0%, #00E5FF 100%);
    --gradient-danger: linear-gradient(135deg, #FF5252 0%, #FFAB40 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    --gradient-secondary: linear-gradient(135deg, #B388FF 0%, #FF4081 100%);
    --gradient-surface: linear-gradient(180deg, var(--surface-tint), transparent);
}