/**
 * Maestro Calendar - Design System - CSS Variables
 * ================================================
 * Cores, fontes e tokens centralizados. Importar antes de layout.css.
 * Primária = sky/blue (#2D9CDB) — alinhada com a doc Swagger do HubitCalendar.
 */

:root {
    color-scheme: light;
    /* ==================== COLORS ==================== */
    /* Primary (sky) */
    --color-primary: #2D9CDB;
    --color-primary-hover: #1F86C1;
    --color-primary-light: #E6F4FB;
    --color-primary-subtle: #F2FAFE;
    --color-primary-rgb: 45, 156, 219;

    /* 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-success-subtle: #d1fae5;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-rgb: 239, 68, 68;
    --color-danger-subtle: #fee2e2;
    --color-warning: #eab308;
    --color-warning-rgb: 234, 179, 8;
    --color-warning-subtle: #fef3c7;
    --color-info: #6366f1;
    --color-info-subtle: #e0e7ff;

    /* Background */
    --bg-body: var(--color-gray-50);
    --bg-surface: #ffffff;
    --bg-surface-elevated: #ffffff;
    --bg-surface-alt: var(--color-gray-100);
    --bg-surface-inset: var(--color-gray-100);
    --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);
    --border-color-strong: var(--color-gray-300);

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

    /* Compatibility aliases used by the project components. Keep these
       token-backed so the same component CSS follows the resolved theme. */
    --color-surface: var(--bg-surface);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-tertiary);
    --color-border: var(--border-color);

    /* ==================== 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;
    --font-size-xs: 0.6875rem;
    --font-size-sm: 0.75rem;
    --font-size-13: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;

    --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;
    --space-11: 2.75rem;
    --touch-target: 44px;
    --content-readable: 1440px;

    /* ==================== BORDER RADIUS ==================== */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --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-md: 0 3px 12px rgba(0, 0, 0, 0.10);
    --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);

    /* ==================== OVERLAYS ==================== */
    --overlay-backdrop: rgba(15, 23, 42, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);

    /* ==================== 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 ==================== */
    --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);
    --success-subtle: var(--color-success-subtle);
    --danger: var(--color-danger);
    --danger-subtle: var(--color-danger-subtle);
    --warning: var(--color-warning);
    --warning-subtle: var(--color-warning-subtle);
    --info: var(--color-info);
    --info-subtle: var(--color-info-subtle);
}

/* Explicit light lock: native controls and UA popovers follow the app theme,
   not the OS prefers-color-scheme, when the user chose light. */
:root[data-theme="light"],
:root[data-mw-theme="light"] {
    color-scheme: light;
}

/* Shared Maestro dark-theme contract: CRM/Identity/Workflow set both attributes.
   Screen only — print always uses the light :root tokens (paper is white). */
@media screen {
:root[data-theme="dark"],
:root[data-mw-theme="dark"] {
    color-scheme: dark;

    --bg-body: #0b1220;
    --bg-surface: #111827;
    --bg-surface-elevated: #1a2233;
    --bg-surface-alt: #131c2e;
    --bg-surface-inset: #0e1626;
    --bg-hover: #1e293b;
    --bg-active: #273449;
    --bg-dark: #020617;
    --bg-white: var(--bg-surface);

    --border-color: #273449;
    --border-color-light: #1f2b44;
    --border-color-strong: #334155;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-placeholder: #8b98ae;
    --text-disabled: #5c6b82;
    --text-muted: var(--text-tertiary);
    --text-inverse: #ffffff;

    --color-gray-50: #020617;
    --color-gray-100: #0f172a;
    --color-gray-200: #1e293b;
    --color-gray-300: #334155;
    --color-gray-400: #64748b;
    --color-gray-500: #94a3b8;
    --color-gray-600: #cbd5e1;
    --color-gray-700: #dbe4f0;
    --color-gray-800: #e2e8f0;
    --color-gray-900: #f8fafc;

    --color-primary-light: rgba(var(--color-primary-rgb), .22);
    --color-primary-subtle: rgba(var(--color-primary-rgb), .12);
    --color-success-subtle: rgba(var(--color-success-rgb), .18);
    --color-danger-subtle: rgba(var(--color-danger-rgb), .18);
    --color-warning-subtle: rgba(var(--color-warning-rgb), .18);
    --color-info-subtle: rgba(99, 102, 241, .18);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow: 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, .5);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, .6);
    --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), .35);
    --overlay-backdrop: rgba(0, 0, 0, .68);
    --overlay-light: rgba(15, 23, 42, .72);
}

:root[data-theme="dark"] ::selection,
:root[data-mw-theme="dark"] ::selection {
    background: rgba(var(--color-primary-rgb), .42);
    color: #f8fafc;
}
}