/* ============================================
   ORTUAPP DESIGN TOKENS
   Única fuente de verdad visual.
   Monocromo neutro + acento neutro (estilo Vercel/Notion).
   ============================================ */

:root {
    /* ----- Colores ----- */
    --color-primary: #171717;
    --color-primary-hover: #000000;
    --color-background: #fafafa;
    --color-surface: #ffffff;
    --color-surface-hover: #f4f4f5;
    --color-text: #18181b;
    --color-text-secondary: #52525b;
    --color-text-muted: #a1a1aa;
    --color-border: #e4e4e7;
    --color-border-strong: #d4d4d8;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;
    --color-info: #0ea5e9;

    /* ----- Tipografía ----- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* ----- Radios ----- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    /* ----- Sombras ----- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ----- Espaciado ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* ----- Alturas ----- */
    --height-input: 38px;
    --height-btn: 38px;
    --height-sidebar-item: 36px;

    /* ----- Transiciones ----- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* ----- Aliases legacy (compatibilidad) ----- */
    --ort-primary: var(--color-primary);
    --ort-primary-hover: var(--color-primary-hover);
    --ort-secondary: var(--color-text-secondary);
    --ort-success: var(--color-success);
    --ort-warning: var(--color-warning);
    --ort-danger: var(--color-danger);
    --ort-info: var(--color-info);
    --ort-bg: var(--color-background);
    --ort-surface: var(--color-surface);
    --ort-border: var(--color-border);
    --ort-text: var(--color-text);
    --ort-text-muted: var(--color-text-muted);
    --ort-radius-sm: var(--radius-sm);
    --ort-radius-md: var(--radius-md);
    --ort-radius-lg: var(--radius-lg);
    --ort-radius-pill: var(--radius-pill);
    --ort-shadow-sm: var(--shadow-sm);
    --ort-shadow-md: var(--shadow-md);
    --ort-shadow-lg: var(--shadow-lg);
    --ort-space-1: var(--space-1);
    --ort-space-2: var(--space-2);
    --ort-space-3: var(--space-3);
    --ort-space-4: var(--space-4);
    --ort-space-5: var(--space-5);
    --ort-space-6: var(--space-6);
    --ort-font: var(--font-sans);
    --ort-btn-height: var(--height-btn);
    --ort-input-height: var(--height-input);
    --ort-navbar-height: 56px;
    --ort-mobile-nav-height: 60px;

    /* Aliases legacy (app.css / dashboard.css) */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-text-secondary);
    --success-color: var(--color-success);
    --danger-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);
    --light-color: #fafafa;
    --dark-color: #18181b;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --border-radius: 12px;
    --transition: all 0.2s ease;

    /* Aliases legacy (auth.css) */
    --apple-bg: #fafafa;
    --apple-card-bg: #ffffff;
    --apple-border: #e4e4e7;
    --apple-text-primary: #18181b;
    --apple-text-secondary: #52525b;
    --apple-blue: #171717;
    --apple-blue-hover: #000000;
    --apple-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --apple-shadow-light: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* ----- App shell ----- */
:root {
    --sidebar-width: 248px;
    --topbar-height: 60px;
    --content-max: 1280px;
    --radius-xs: 4px;
    --color-primary-soft: rgba(23, 23, 23, 0.06);
    --color-focus: rgba(23, 23, 23, 0.16);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ----- Mapeo de tokens a variables Bootstrap 5.3 (tema neutro) ----- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 23, 23, 23;
    --bs-secondary: var(--color-text-secondary);
    --bs-secondary-rgb: 82, 82, 91;
    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-text);
    --bs-secondary-color: var(--color-text-secondary);
    --bs-tertiary-color: var(--color-text-muted);
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border);
    --bs-light: var(--color-surface);
    --bs-light-rgb: 255, 255, 255;
    --bs-card-bg: var(--color-surface);
    --bs-card-cap-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border);
    --bs-card-box-shadow: var(--shadow-xs);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--color-surface-hover);
    --bs-table-border-color: var(--color-border);
    --bs-link-color: var(--color-text);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-color-rgb: 24, 24, 27;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-base);
    --bs-body-line-height: 1.5;
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-xs);
    --bs-border-radius-lg: var(--radius-md);
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}