/* ══════════════════════════════════════════════════════════════════════
   IVALENE EXPRESS — DESIGN SYSTEM (fonte única de verdade)
   Design tokens + componentes reutilizáveis. Camada aditiva: NÃO altera
   markup existente; centraliza a identidade (azul-marinho (estrutura), azul
   do logótipo (acção) e laranja comercial do site (conversão), antes espalhada em hex soltos.
   Carregado no site público e em todos os painéis.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca / estrutura (cabeçalhos, barra de navegação, menu lateral) ──
       Azul-marinho (a barra de navegação do site). Toda a "moldura" da plataforma usa esta
       família: barra azul do site, cabeçalho e menu dos painéis, topo da
       app do motorista. */
    --ix-brand-900: #0b1f3d;
    --ix-brand:     #0f2a52;
    --ix-brand-700: #123a7a;
    --ix-brand-soft:#e8eef8;

    /* ── Acção principal (guardar, confirmar, filtrar, entrar) ──
       Azul do logótipo. Contraste com texto branco 6.7:1 (AA). */
    --ix-primary:        #1d4ed8;
    --ix-primary-hover:  #1e40af;
    --ix-primary-active: #1e3a8a;
    --ix-primary-soft:   #eff4ff;

    /* ── Acção comercial / conversão (comprar, pagar, vender, publicar) ──
       Laranja já usado nos CTA do site (Vender agora, Comprar).
       Só para o CTA comercial de cada ecrã. */
    --ix-cta:        #ea580c;
    --ix-cta-hover:  #c2410c;
    --ix-cta-soft:   #fff1e8;

    /* ── Secundária = marca (substitui o índigo, que a interface não usava) ── */
    --ix-secondary:       #0f2a52;
    --ix-secondary-hover: #0b1f3d;
    --ix-accent:          #ea580c;

    /* ── Preço ── */
    --ix-price: #c2410c;

    /* ── Estados (fundo suave + texto escuro = legível; "-fill" para ícones/barras) ── */
    --ix-success: #15803d;  --ix-success-fill:#16a34a; --ix-success-soft:#e8f6ee;
    --ix-warning: #b45309;  --ix-warning-fill:#f59e0b; --ix-warning-soft:#fef3c7;
    --ix-danger:  #dc2626;  --ix-danger-hover:#b91c1c; --ix-danger-soft: #fdecec;
    --ix-info:    #0369a1;  --ix-info-fill:   #0ea5e9; --ix-info-soft:   #e0f2fe;
    --ix-neutral: #475569;  --ix-neutral-soft:#f1f5f9;

    /* ── Superfícies ── */
    --ix-bg:              #f4f6fa;
    --ix-surface:         #ffffff;
    --ix-surface-alt:     #f8fafc;
    --ix-surface-elevated:#ffffff;

    /* ── Bordas ── */
    --ix-border:        #e5e9f0;
    --ix-border-strong: #cbd5e1;

    /* ── Texto ── */
    --ix-text:          #0f172a;
    --ix-text-secondary:#475569;
    --ix-text-muted:    #64748b;
    --ix-text-onprimary:#ffffff;

    /* ── Foco (teclado) ── */
    --ix-focus: 0 0 0 3px rgba(29,78,216,.28);
    --ix-focus-color: rgba(29,78,216,.55);

    /* ── Tipografia: uma só família em toda a plataforma ── */
    --ix-font: 'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --ix-fs-caption: 12px;
    --ix-fs-sm:      13px;
    --ix-fs-body:    14.5px;
    --ix-fs-lg:      16px;
    --ix-fs-h4:      18px;
    --ix-fs-h3:      21px;
    --ix-fs-h2:      26px;
    --ix-fs-h1:      32px;
    --ix-fs-display: 40px;
    --ix-fw-normal:  400;
    --ix-fw-medium:  500;
    --ix-fw-semibold:600;
    --ix-fw-bold:    700;
    --ix-fw-black:   800;

    /* ── Espaçamento (escala de 4px) ── */
    --ix-space-1: 4px;  --ix-space-2: 8px;  --ix-space-3: 12px;
    --ix-space-4: 16px; --ix-space-5: 20px; --ix-space-6: 24px;
    --ix-space-8: 32px; --ix-space-10:40px; --ix-space-12:48px;

    /* ── Raio ── */
    --ix-radius-xs: 6px;
    --ix-radius-sm: 8px;
    --ix-radius-md: 10px;
    --ix-radius-lg: 14px;
    --ix-radius-xl: 18px;
    --ix-radius-pill: 999px;

    /* ── Sombra ── */
    --ix-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
    --ix-shadow-md: 0 6px 18px rgba(15,23,42,.08);
    --ix-shadow-lg: 0 18px 44px rgba(15,23,42,.16);

    /* ── Controlos ── */
    --ix-control-h:    42px;
    --ix-control-h-sm: 34px;
    --ix-control-h-lg: 48px;

    /* ── Transições / camadas ── */
    --ix-transition: .18s ease;
    --ix-z-modal: 1050;
    --ix-container: 1200px;
}

/* Aliases retro-compatíveis: ivalene-moderno.css e as correções da FASE 7
   já referenciavam var(--color-*). Mapeados aqui para os tokens acima. */
:root {
    --color-primary: var(--ix-primary);
    --color-primary-hover: var(--ix-primary-hover);
    --color-secondary: var(--ix-secondary);
    --color-success: var(--ix-success);
    --color-warning: var(--ix-warning);
    --color-danger: var(--ix-danger);
    --color-surface: var(--ix-surface);
    --color-background: var(--ix-bg);
    --text-primary: var(--ix-text);
    --text-secondary: var(--ix-text-secondary);
    --text-muted: var(--ix-text-muted);
    --radius-sm: var(--ix-radius-sm);
    --radius-md: var(--ix-radius-md);
    --radius-lg: var(--ix-radius-lg);
    --shadow-sm: var(--ix-shadow-sm);
    --shadow-md: var(--ix-shadow-md);
}

/* ══ Botões utilitários (prefixo ix- para não colidir com Bootstrap) ══ */
.ix-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--ix-font);font-size:var(--ix-fs-body);font-weight:var(--ix-fw-semibold);
    line-height:1;padding:11px 18px;border-radius:var(--ix-radius-sm);border:1px solid transparent;
    cursor:pointer;text-decoration:none;transition:all var(--ix-transition);white-space:nowrap;}
.ix-btn:focus-visible{outline:3px solid var(--ix-focus-color);outline-offset:2px;}
.ix-btn-primary{background:var(--ix-primary);color:#fff;}
.ix-btn-primary:hover{background:var(--ix-primary-hover);color:#fff;}
.ix-btn-secondary{background:var(--ix-secondary);color:#fff;}
.ix-btn-secondary:hover{background:var(--ix-secondary-hover);color:#fff;}
.ix-btn-outline{background:#fff;color:var(--ix-text);border-color:var(--ix-border-strong);}
.ix-btn-outline:hover{border-color:var(--ix-primary);color:var(--ix-primary);}
.ix-btn-cta{background:var(--ix-cta);color:#fff;}
.ix-btn-cta:hover{background:var(--ix-cta-hover);color:#fff;}
.ix-btn-ghost{background:transparent;color:var(--ix-primary);}
.ix-btn-ghost:hover{background:var(--ix-primary-soft);}
.ix-btn-danger{background:var(--ix-danger);color:#fff;}
.ix-btn[disabled],.ix-btn.is-loading{opacity:.6;pointer-events:none;}
.ix-btn.is-loading::before{content:'';width:15px;height:15px;border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff;border-radius:50%;animation:ix-spin .7s linear infinite;}

/* ══ Badges de estado (mesma cor em todo o sistema) ══ */
.ix-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--ix-fs-caption);
    font-weight:var(--ix-fw-semibold);padding:3px 10px;border-radius:var(--ix-radius-pill);line-height:1.5;}
.ix-badge-success{background:var(--ix-success-soft);color:var(--ix-success);}
.ix-badge-warning{background:var(--ix-warning-soft);color:var(--ix-warning);}
.ix-badge-danger{background:var(--ix-danger-soft);color:var(--ix-danger);}
.ix-badge-info{background:var(--ix-info-soft);color:var(--ix-info);}
.ix-badge-primary{background:var(--ix-primary-soft);color:var(--ix-primary);}
.ix-badge-neutral{background:#f1f5f9;color:var(--ix-text-secondary);}

/* ══ Card ══ */
.ix-card{background:var(--ix-surface);border:1px solid var(--ix-border);
    border-radius:var(--ix-radius-lg);box-shadow:var(--ix-shadow-sm);padding:var(--ix-space-5);}

/* ══ Empty state ══ */
.ix-empty{text-align:center;padding:48px 20px;color:var(--ix-text-secondary);}
.ix-empty .ix-empty-ico{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
    display:flex;align-items:center;justify-content:center;background:var(--ix-primary-soft);
    color:var(--ix-primary);font-size:26px;}
.ix-empty h4{font-size:var(--ix-fs-h4);font-weight:var(--ix-fw-bold);color:var(--ix-text);margin:0 0 6px;}
.ix-empty p{font-size:var(--ix-fs-body);margin:0 0 18px;}

/* ══ Skeleton / loading ══ */
.ix-skeleton{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);
    background-size:400% 100%;animation:ix-shimmer 1.3s ease infinite;border-radius:var(--ix-radius-sm);}
@keyframes ix-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ix-spin{to{transform:rotate(360deg)}}
.ix-spinner{width:26px;height:26px;border:3px solid var(--ix-border-strong);
    border-top-color:var(--ix-primary);border-radius:50%;animation:ix-spin .7s linear infinite;display:inline-block;}

/* ══ Toque/acessibilidade: alvos mínimos 40px em controlos do DS ══ */
.ix-btn,.ix-badge{min-height:0;}
@media (max-width:576px){ .ix-btn{width:100%;} .ix-btn.ix-btn-inline{width:auto;} }

/* ══════════════════════════════════════════════════════════════════════
   CAMADA GLOBAL DE ACESSIBILIDADE E POLIMENTO (aditiva, segura)
   Aplica a todo o site e painéis sem alterar markup. WCAG 2.2 AA.
   ══════════════════════════════════════════════════════════════════════ */

/* Foco visível por teclado (WCAG 2.4.7) — só no foco por teclado, não no rato.
   Cobre links, botões e controlos de formulário em todo o lado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible{
    outline: 3px solid var(--ix-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* Remove o outline só quando NÃO é navegação por teclado (evita anel no clique) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){ outline: none; }

/* Respeitar quem prefere menos movimento (WCAG 2.3.3 / conforto) */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

/* Utilitário: conteúdo só para leitores de ecrã (rótulos acessíveis) */
.ix-sr-only{
    position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip-link (só aparece ao focar por teclado) */
.ix-skip{
    position:absolute;left:-999px;top:0;z-index:calc(var(--ix-z-modal) + 10);
    background:var(--ix-primary);color:#fff;padding:10px 16px;border-radius:0 0 var(--ix-radius-sm) 0;
    font-weight:var(--ix-fw-semibold);text-decoration:none;
}
.ix-skip:focus{left:0;}

/* Alvos de toque mínimos em ações compactas do storefront/painéis (WCAG 2.5.8) */
@media (pointer:coarse){
    .btn, .nav-link, .dropdown-item, a.page-link{ min-height:40px; }
}