/*
=====================================================
JUAN CARDENA - DESIGN VARIABLES
=====================================================
EDIT THIS FILE TO CHANGE COLORS, FONTS, AND SPACING
This is the single source of truth for the design system.
=====================================================
*/

:root {
    /*
    ========================================
    BRAND COLORS - FlowQ Light Theme
    ========================================
    */

    /* Primary Color (Indigo, modern) */
    --color-primary: #374151;

    /* Surface Color (Clean backgrounds) */
    --color-surface: #ffffff;

    /* Background Color (FlowQ light gray) */
    --color-background: #f9fafb;

    /* Accent Color (Gold) - Rich, premium gold */
    --color-accent: #c9a227;

    /*
    ========================================
    COLOR VARIATIONS
    ========================================
    */

    /* Gray Scale (FlowQ) */
    --slate-50: #f9fafb;
    --slate-100: #f3f4f6;
    --slate-200: #e5e7eb;
    --slate-300: #d1d5db;
    --slate-400: #9ca3af;
    --slate-500: #6b7280;
    --slate-600: #4b5563;
    --slate-700: #374151;
    --slate-800: #1f2937;
    --slate-900: #111827;

    /* Accent/Gold Scale - Premium gold tones */
    --accent-light: #e8c547;
    --accent-base: #c9a227;
    --accent-dark: #a68519;

    /* Era Colors (4 Pillars) */
    --era-web: #6366f1;
    --era-software: #10b981;
    --era-data: #0891b2;
    --era-ai: #c9a227;

    /*
    ========================================
    SEMANTIC COLORS - Use these in components
    ========================================
    */
    --text-primary: var(--slate-800);
    --text-secondary: var(--slate-600);
    --text-muted: var(--slate-400);
    --text-inverse: var(--color-surface);

    --bg-page: var(--color-background);
    --bg-card: var(--color-surface);
    --bg-dark: var(--slate-800);
    --bg-darker: var(--slate-900);

    --border-light: var(--slate-200);
    --border-medium: var(--slate-300);

    /*
    ========================================
    TYPOGRAPHY - Font settings
    ========================================
    */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Font Sizes */
    --text-xs: 0.65rem;
    --text-sm: 0.75rem;
    --text-base: 0.875rem;
    --text-md: 0.95rem;
    --text-lg: 1.05rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.75rem;
    --text-5xl: 2.25rem;
    --text-6xl: 2.75rem;

    /*
    ========================================
    SPACING - Consistent spacing scale
    ========================================
    */
    --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;
    --space-20: 80px;
    --space-24: 96px;

    /*
    ========================================
    BORDER RADIUS
    ========================================
    */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /*
    ========================================
    SHADOWS
    ========================================
    */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.1);

    /*
    ========================================
    TRANSITIONS
    ========================================
    */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /*
    ========================================
    LAYOUT
    ========================================
    */
    --sidebar-width: 220px;
    --content-max-width: 800px;
    --page-padding: var(--space-6);
}