/* ============================================================
   Grúas de Jalisco · Design Tokens
   Paleta sobria basada en el logo (morado + negro + blanco)
   ============================================================ */

:root {
    /* ---------- COLOR · MARCA ---------- */
    --gj-primary-50:  #F4EEFA;
    --gj-primary-100: #E4D5F0;
    --gj-primary-200: #CAACE1;
    --gj-primary-300: #AF82D1;
    --gj-primary-400: #8B5FB0;
    --gj-primary-500: #5B2C82;   /* Morado corporativo (logo) */
    --gj-primary-600: #4A2370;
    --gj-primary-700: #3D1B5C;
    --gj-primary-800: #2B1342;
    --gj-primary-900: #1A0B29;

    /* ---------- COLOR · NEUTRO ---------- */
    --gj-ink:        #0F0F12;   /* Negro casi puro (texto principal) */
    --gj-ink-soft:   #1F2024;
    --gj-gray-50:    #F7F5FA;   /* Fondo de página */
    --gj-gray-100:   #EFECF3;
    --gj-gray-200:   #DAD6DF;
    --gj-gray-300:   #B5AFBD;
    --gj-gray-400:   #8E8896;
    --gj-gray-500:   #6B6772;
    --gj-gray-600:   #4F4B57;
    --gj-gray-700:   #383540;
    --gj-gray-800:   #25232C;
    --gj-gray-900:   #15131A;
    --gj-white:      #FFFFFF;

    /* ---------- COLOR · ESTADO ---------- */
    --gj-success:    #1F9D55;
    --gj-success-bg: #E6F4EC;
    --gj-warning:    #C77700;
    --gj-warning-bg: #FBF1E0;
    --gj-danger:     #C0392B;
    --gj-danger-bg:  #FAEAE7;
    --gj-info:       #2272B1;
    --gj-info-bg:    #E5F1FA;

    /* ---------- SEMÁNTICA ---------- */
    --gj-bg:           var(--gj-gray-50);
    --gj-surface:      var(--gj-white);
    --gj-surface-alt:  var(--gj-gray-100);
    --gj-border:       var(--gj-gray-200);
    --gj-border-strong:var(--gj-gray-300);
    --gj-text:         var(--gj-ink);
    --gj-text-muted:   var(--gj-gray-500);
    --gj-text-inverse: var(--gj-white);
    --gj-link:         var(--gj-primary-600);
    --gj-link-hover:   var(--gj-primary-700);

    /* Bootstrap 5 override map */
    --bs-primary:     var(--gj-primary-500);
    --bs-primary-rgb: 91, 44, 130;
    --bs-body-color:  var(--gj-text);
    --bs-body-bg:     var(--gj-bg);
    --bs-border-color: var(--gj-border);

    /* ---------- TIPOGRAFÍA ---------- */
    --gj-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gj-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --gj-fs-xs:        0.75rem;   /* 12 */
    --gj-fs-sm:        0.875rem;  /* 14 */
    --gj-fs-base:      1rem;      /* 16 */
    --gj-fs-lg:        1.125rem;  /* 18 */
    --gj-fs-xl:        1.25rem;   /* 20 */
    --gj-fs-2xl:       1.5rem;    /* 24 */
    --gj-fs-3xl:       1.875rem;  /* 30 */
    --gj-fs-4xl:       2.25rem;   /* 36 */
    --gj-fs-5xl:       3rem;      /* 48 */

    --gj-fw-regular:   400;
    --gj-fw-medium:    500;
    --gj-fw-semibold:  600;
    --gj-fw-bold:      700;

    --gj-lh-tight:     1.2;
    --gj-lh-snug:      1.35;
    --gj-lh-normal:    1.5;
    --gj-lh-relaxed:   1.65;

    /* ---------- ESPACIADO ---------- */
    --gj-space-0:   0;
    --gj-space-1:   0.25rem;
    --gj-space-2:   0.5rem;
    --gj-space-3:   0.75rem;
    --gj-space-4:   1rem;
    --gj-space-5:   1.25rem;
    --gj-space-6:   1.5rem;
    --gj-space-8:   2rem;
    --gj-space-10:  2.5rem;
    --gj-space-12:  3rem;
    --gj-space-16:  4rem;

    /* ---------- RADIUS ---------- */
    --gj-radius-sm:    0.25rem;
    --gj-radius:       0.5rem;
    --gj-radius-md:    0.75rem;
    --gj-radius-lg:    1rem;
    --gj-radius-xl:    1.5rem;
    --gj-radius-full:  9999px;

    /* ---------- SOMBRAS ---------- */
    --gj-shadow-xs:    0 1px 1px 0 rgba(15, 15, 18, 0.04);
    --gj-shadow-sm:    0 1px 2px 0 rgba(15, 15, 18, 0.06), 0 1px 3px 0 rgba(15, 15, 18, 0.04);
    --gj-shadow:       0 4px 6px -1px rgba(15, 15, 18, 0.08), 0 2px 4px -2px rgba(15, 15, 18, 0.05);
    --gj-shadow-md:    0 10px 15px -3px rgba(15, 15, 18, 0.10), 0 4px 6px -4px rgba(15, 15, 18, 0.05);
    --gj-shadow-lg:    0 20px 25px -5px rgba(15, 15, 18, 0.12), 0 8px 10px -6px rgba(15, 15, 18, 0.06);
    --gj-shadow-ring:  0 0 0 3px rgba(91, 44, 130, 0.20);

    /* ---------- TRANSICIONES ---------- */
    --gj-transition:       150ms cubic-bezier(0.4, 0, 0.2, 1);
    --gj-transition-slow:  300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- LAYOUT ---------- */
    --gj-sidebar-w:        260px;
    --gj-sidebar-w-mini:   72px;
    --gj-topbar-h:         64px;
    --gj-content-max:      1320px;

    /* ---------- Z-INDEX ---------- */
    --gj-z-sidebar:        1000;
    --gj-z-topbar:         1010;
    --gj-z-modal-backdrop: 1040;
    --gj-z-modal:          1050;
    --gj-z-tooltip:        1080;
    --gj-z-toast:          1100;
}

/* ============================================================
   Dark mode (opcional, se activa con [data-theme="dark"] en <html>)
   ============================================================ */
[data-theme="dark"] {
    --gj-bg:           #0E0C12;
    --gj-surface:      #17141E;
    --gj-surface-alt:  #1F1B2A;
    --gj-border:       #2C2738;
    --gj-border-strong:#3E3650;
    --gj-text:         #ECE9F2;
    --gj-text-muted:   #9A93AA;
    --gj-text-inverse: #0E0C12;
    --gj-link:         var(--gj-primary-300);
    --gj-link-hover:   var(--gj-primary-200);

    --bs-body-color:   var(--gj-text);
    --bs-body-bg:      var(--gj-bg);
    --bs-border-color: var(--gj-border);
}

/* Respeta preferencia del sistema si no se forzó manualmente */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gj-bg:           #0E0C12;
        --gj-surface:      #17141E;
        --gj-surface-alt:  #1F1B2A;
        --gj-border:       #2C2738;
        --gj-border-strong:#3E3650;
        --gj-text:         #ECE9F2;
        --gj-text-muted:   #9A93AA;
        --gj-text-inverse: #0E0C12;
        --gj-link:         var(--gj-primary-300);
        --gj-link-hover:   var(--gj-primary-200);
        --bs-body-color:   var(--gj-text);
        --bs-body-bg:      var(--gj-bg);
        --bs-border-color: var(--gj-border);
    }
}