/**
 * Maestro File - Design System - CSS Variables
 * ============================================
 * Cores, fontes e tokens centralizados. Importar antes de layout.css.
 */

:root {
    /* ==================== COLORS ==================== */
    /* Primary (sky) */
    --color-primary: #0ea5e9;
    --color-primary-hover: #0284c7;
    --color-primary-light: #e0f2fe;
    --color-primary-subtle: #f0f9ff;
    --color-primary-rgb: 14, 165, 233;

    /* Neutral / Gray */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Semantic */
    --color-success: #22c55e;
    --color-success-rgb: 34, 197, 94;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-rgb: 239, 68, 68;
    --color-warning: #eab308;
    --color-warning-rgb: 234, 179, 8;

    /* Background */
    --bg-body: var(--color-gray-50);
    --bg-surface: #ffffff;
    --bg-hover: var(--color-gray-100);
    --bg-active: var(--color-gray-200);
    --bg-dark: #1a1a1a;
    --bg-white: var(--bg-surface);

    /* Border */
    --border-color: var(--color-gray-200);
    --border-color-light: var(--color-gray-100);

    /* Text */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-tertiary: var(--color-gray-500);
    --text-inverse: #ffffff;

    /* ==================== TYPOGRAPHY ==================== */
    --font-family-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --font-size-2xs: 0.625rem;   /* 10px */
    --font-size-xs: 0.6875rem;   /* 11px */
    --font-size-sm: 0.75rem;     /* 12px */
    --font-size-13: 0.8125rem;   /* 13px */
    --font-size-base: 0.875rem;  /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 2rem;       /* 28px com root 14px */

    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==================== SPACING ==================== */
    --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;

    /* ==================== BORDER RADIUS ==================== */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ==================== SHADOWS ==================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 8px 40px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
    --shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --shadow-upload-panel: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-popover: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    --shadow-image-king: 0 1px 3px rgba(0, 0, 0, 0.2);

    /* ==================== OVERLAYS ==================== */
    --overlay-backdrop: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);
    --overlay-dark-70: rgba(0, 0, 0, 0.7);

    /* ==================== TRANSITIONS ==================== */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 250ms ease;

    /* ==================== Z-INDEX ==================== */
    --z-modal-backdrop: 500;
    --z-modal: 600;

    /* ==================== LAYOUT ==================== */
    --sidebar-width: 256px;
    --sidebar-collapsed: 68px;
    --header-height: 64px;
    --modal-width: 540px;

    /* ==================== ALIASES (layout.css e componentes) ==================== */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --primary-light: var(--color-primary-light);
    --primary-subtle: var(--color-primary-subtle);
    --border: var(--border-color);
    --border-light: var(--border-color-light);
    --success: var(--color-success);
    --danger: var(--color-danger);
    --warning: var(--color-warning);
    --border-color-light: var(--border-light);
}