/* ============================================================
   Habitta Design System — Tokens
   Fuente única de verdad para colores, tipografía, espaciado
   y radios. Los temas por empresa sobrescriben --color-primary.
   ============================================================ */

:root {
    /* Marca */
    --color-primary: #203A9A;
    --color-primary-hover: #1a3078;
    --color-primary-light: color-mix(in srgb, var(--color-primary) 12%, transparent);

    /* Semánticos */
    --color-secondary: #6B7280;
    --color-secondary-hover: #4B5563;
    --color-warning: #F59E0B;
    --color-warning-hover: #D97706;
    --color-danger: #dc3545;
    --color-success: #16a34a;

    /* Superficies */
    --color-bg: #f4f6f9;
    --color-card: #ffffff;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-input-border: #ced4da;
    --color-disabled-bg: #E5E7EB;
    --color-disabled-text: #6B7280;
    --color-outline-hover: #F2F2F2;

    /* Validación (siempre rojo semántico) */
    --color-error: #dc3545;
    --color-error-bg: #fef2f2;

    /* Éxito */
    --color-success-bg: #ecfdf5;
    --color-success-text: #166534;
    --color-success-border: #bbf7d0;

    /* Tipografía */
    --font-family-base: 'Heebo', sans-serif;
    --font-family-auth: 'Quicksand', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Radios */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-pill: 30px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);

    /* Componentes — Botones */
    --btn-padding-y: 10px;
    --btn-padding-x: 25px;
    --btn-font-size: 16px;
    --btn-radius: var(--radius-pill);

    /* Componentes — Inputs */
    --input-padding-y: 8px;
    --input-padding-x: 10px;
    --input-font-size: 14px;
    --input-radius: var(--radius-sm);

    /* Componentes — Tablas */
    --table-header-bg: var(--color-primary);
    --table-header-color: #ffffff;
    --table-row-hover: color-mix(in srgb, var(--color-primary) 6%, white);
    --table-border: var(--color-border);
    --table-stripe: color-mix(in srgb, var(--color-primary) 3%, white);

    /* Secciones */
    --color-section-title: var(--color-primary);

    /* App shell (header, sidebar, breadcrumb, footer, panel usuario) */
    --shell-bg: var(--color-card);
    --shell-border: var(--color-border);
    --shell-shadow: var(--shadow-md);
    --shell-accent-width: 4px;
    --shell-sidebar-width: 270px;
    --shell-inset: 10px;
    --shell-content-start: calc(var(--shell-sidebar-width) + var(--shell-inset));
    --shell-header-height: 100px;
    --shell-footer-height: 60px;
    --shell-content-pad-bottom: calc(var(--shell-footer-height) + 30px);

    /* Cards de contenido y dashboard */
    --card-bg: var(--color-card);
    --card-border: var(--color-border);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: 0 8px 20px color-mix(in srgb, var(--color-primary) 18%, transparent);
    --card-radius: var(--radius-md);
    --card-radius-lg: 22px;
    --card-accent-width: var(--shell-accent-width);
    --card-muted-surface: color-mix(in srgb, var(--color-primary) 10%, var(--color-card));
    --card-image-border: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.theme-default {
    --auth-bg-image: url('../img/login_img.png');
}

.theme-red {
    --color-primary: #dc2626;
    --color-primary-hover: #b91c1c;
    --color-bg: #fef2f2;
    --color-card: #fffafa;
    --auth-bg-image: url('../img/login_img.png');
}

.theme-green {
    --color-primary: #16a34a;
    --color-primary-hover: #15803d;
    --color-bg: #f0fdf4;
    --color-card: #ffffff;
    --auth-bg-image: url('../img/login_img.png');
}

.theme-orange {
    --color-primary: #f97316;
    --color-primary-hover: #ea580c;
    --color-bg: #fff7ed;
    --color-card: #ffffff;
    --auth-bg-image: url('../img/login_img.png');
}

.theme-cyan {
    --color-primary: #06b6d4;
    --color-primary-hover: #0891b2;
    --color-bg: #ecfeff;
    --color-card: #ffffff;
    --auth-bg-image: url('../img/login_img.png');
}

.theme-purple {
    --color-primary: #8b5cf6;
    --color-primary-hover: #7c3aed;
    --color-bg: #f5f3ff;
    --color-card: #ffffff;
    --auth-bg-image: url('../img/login_img.png');
}

.theme-pink {
    --color-primary: #ec4899;
    --color-primary-hover: #db2777;
    --color-bg: #fff1f2;
    --color-card: #ffffff;
    --auth-bg-image: url('../img/login_img.png');
}

.theme-yellow {
    --color-primary: #f59e0b;
    --color-primary-hover: #d97706;
    --color-bg: #fffbeb;
    --color-card: #ffffff;
    --auth-bg-image: url('../img/login_img.png');
}

.dark {
    color-scheme: dark;
    --color-bg: #080d18;
    --color-card: #121a2b;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-border: #243044;
    --color-input-border: #334155;
    --color-disabled-bg: #1a2438;
    --color-disabled-text: #94a3b8;
    --color-outline-hover: #1a2438;
    --color-primary-light: color-mix(in srgb, var(--color-primary) 22%, var(--color-card));
    --shell-bg: #0f1626;
    --shell-border: #243044;
    --shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    --card-bg: var(--color-card);
    --card-border: var(--color-border);
    --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);
    --card-muted-surface: color-mix(in srgb, var(--color-primary) 14%, var(--color-card));
    --card-image-border: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    --table-row-hover: color-mix(in srgb, var(--color-primary) 18%, var(--color-card));
    --table-stripe: color-mix(in srgb, var(--color-primary) 10%, var(--color-card));
    --color-error-bg: color-mix(in srgb, var(--color-error) 16%, var(--color-card));
    --color-success-bg: color-mix(in srgb, var(--color-success) 14%, var(--color-card));
    --color-surface: #0f1626;
}

.dark.theme-default {
    --color-bg: #080d18;
    --color-card: #121a2b;
    --shell-bg: #0f1626;
}

.dark.theme-red {
    --color-bg: #140808;
    --color-card: #1f1010;
    --shell-bg: #180a0a;
    --color-text: #fee2e2;
    --color-text-muted: #fca5a5;
    --color-border: #7f1d1d;
    --color-primary: #ef4444;
    --color-primary-hover: #dc2626;
    --color-success-bg: #123524;
    --color-success-text: #bbf7d0;
    --color-success-border: #1f6b43;
}

.dark.theme-green {
    --color-bg: #031a0e;
    --color-card: #0a2e1c;
    --shell-bg: #051f12;
    --color-text: #d1fae5;
    --color-text-muted: #6ee7b7;
    --color-border: #065f46;
    --color-primary: #22c55e;
    --color-primary-hover: #16a34a;
}

.dark.theme-orange {
    --color-bg: #12100e;
    --color-card: #1c1917;
    --shell-bg: #161412;
    --color-text: #f5f5f4;
    --color-text-muted: #a8a29e;
    --color-border: #44403c;
    --color-primary: #fb923c;
    --color-primary-hover: #f97316;
}

.dark.theme-cyan {
    --color-bg: #071018;
    --color-card: #0f1a28;
    --shell-bg: #0a121c;
    --color-text: #cffafe;
    --color-text-muted: #7dd3fc;
    --color-border: #06b6d4;
    --color-primary: #22d3ee;
    --color-primary-hover: #06b6d4;
}

.dark.theme-purple {
    --color-bg: #120f2a;
    --color-card: #1a1740;
    --shell-bg: #151233;
    --color-text: #ede9fe;
    --color-text-muted: #c4b5fd;
    --color-border: #8b5cf6;
    --color-primary: #a78bfa;
    --color-primary-hover: #7c3aed;
}

.dark.theme-pink {
    --color-bg: #140810;
    --color-card: #1f0f1c;
    --shell-bg: #190a14;
    --color-text: #ffe4f0;
    --color-text-muted: #f9a8d4;
    --color-border: #ec4899;
    --color-primary: #f472b6;
    --color-primary-hover: #db2777;
}

.dark.theme-yellow {
    --color-bg: #121008;
    --color-card: #1c1810;
    --shell-bg: #161208;
    --color-text: #fef9c3;
    --color-text-muted: #fcd34d;
    --color-border: #f59e0b;
    --color-primary: #facc15;
    --color-primary-hover: #d97706;
}