/* ==================================================================
   brand.css — Sistema visual NAR (Nexora Capital Group) (marca única, azul institucional)

   Un solo dominio raíz (nar.jsadsai.com) con tres subdominios de rol:
     nar.jsadsai.com         → web comercial
     cliente.nar.jsadsai.com → portal del cliente
     panel.nar.jsadsai.com   → consola operativa

   La identidad tipográfica y el color son iguales en las tres zonas.
   El mecanismo `data-brand="..."` se mantiene por si en el futuro se
   quisiera un tinte sutil por sección (hoy: mismo azul en las 3).
   ================================================================== */

:root {
    /* ── Neutros ───────────────────────────────────────── */
    --brand-dark:            #05070D;
    --brand-primary:         #0B1B36;
    --brand-primary-strong:  #05070D;
    --brand-primary-soft:    #16294F;
    --brand-secondary:       #4A5568;

    --brand-bg:              #F7F9FC;
    --brand-surface:         #FFFFFF;
    --brand-surface-alt:     #EEF2F9;
    --brand-border:          #DEE6F2;
    --brand-text-strong:     #0A1730;
    --brand-text:            #1B2333;
    --brand-text-soft:       #55607A;
    --brand-text-mute:       #8792AC;

    /* ── Estados semánticos (independientes de la marca) ─── */
    --state-info:    #2A5C8A;
    --state-success: #2F6B4A;
    --state-warning: #8C6A1F;
    --state-danger:  #8B2E2E;

    /* ── Tipografía ──────────────────────────────────────── */
    /* Montserrat se auto-hospeda y se declara (@font-face) en premium.css,
       que el layout público carga siempre justo después de este archivo. */
    --font-display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ── Espaciado ───────────────────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ── Radios y sombras ────────────────────────────────── */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(10, 12, 16, 0.06);
    --shadow:    0 4px 14px rgba(10, 12, 16, 0.08);
    --shadow-lg: 0 12px 36px rgba(10, 12, 16, 0.12);

    /* ── Layout ──────────────────────────────────────────── */
    --container-max: 1180px;

    /* ── Acento único NAR: azul institucional profundo ── */
    --brand-accent:      #1D4FD8;
    --brand-accent-soft: #DCE6FF;
}

/* Radios más suaves (más cercanos a jsadsAI) solo en la web comercial
   pública. Panel admin y portal cliente conservan el radio original:
   son herramientas operativas densas en datos, no vitrina comercial. */
[data-brand="public"] {
    --radius:    12px;
    --radius-lg: 20px;
}

/* Las tres zonas comparten identidad — se mantiene el selector data-brand
   como gancho para futuras variaciones sutiles si el negocio las requiere. */
[data-brand="public"],
[data-brand="client"],
[data-brand="admin"] {
    --brand-accent:      #1D4FD8;
    --brand-accent-soft: #DCE6FF;
}

/* ==================================================================
   Logotipo tipografico NAR (N oscuro + AR azul)
   Uso:
     <span class="wm-logo">
       <span class="wm-logo__prefix">N</span>
       <span class="wm-logo__suffix">AR</span>
     </span>
   ================================================================== */
.wm-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    font-size: 1.25rem;
    text-decoration: none;
}
.wm-logo__prefix { color: var(--brand-primary); }
.wm-logo__suffix { color: var(--brand-accent); }

.wm-logo--sm { font-size: 1rem; }
.wm-logo--lg { font-size: 1.75rem; }
.wm-logo--xl { font-size: 2.5rem; letter-spacing: 0.03em; }

/* Sobre fondo oscuro: N se aclara para conservar contraste */
.wm-logo--on-dark .wm-logo__prefix { color: #FFFFFF; }
.wm-logo--on-dark .wm-logo__suffix { color: var(--brand-accent-soft); }