/* global/brand.css — sistema de diseño Glaz
 *
 * Concepto: nocturno lunar. Fondo espacio profundo, luz crema de luna,
 * acentos aqua/lila. Se carga DESPUÉS de global.css para pisar los tokens
 * heredados del framework (que venían del proyecto Soltis).
 */

:root {
    /* Espacio */
    --mg-space: #0B1020;
    --mg-space-2: #141B33;
    --mg-space-3: #1C2647;

    /* Luz lunar */
    --mg-moon: #F3E7C9;
    --mg-moon-dim: #D9CBA9;

    /* Acentos */
    --mg-aqua: #2DD4BF;
    --mg-lilac: #A78BFA;
    --mg-glow: rgba(45, 212, 191, .35);

    /* Superficies claras (panel admin) */
    --mg-paper: #F7F8FC;
    --mg-card: #FFFFFF;
    --mg-ink: #0F172A;
    --mg-muted: #64748B;
    --mg-line: #E4E7EF;

    /* Semánticos */
    --mg-ok: #10B981;
    --mg-warn: #F59E0B;
    --mg-danger: #EF4444;

    /* Tipografía */
    --mg-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mg-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* Radios y sombras */
    --mg-r-sm: 8px;
    --mg-r: 14px;
    --mg-r-lg: 22px;
    --mg-shadow: 0 18px 44px rgba(11, 16, 32, .10);
    --mg-shadow-lg: 0 30px 80px rgba(11, 16, 32, .18);

    /* Pisamos los tokens del framework heredado para que TODO quede coherente */
    --color-brand-primary: #1E2A4A;
    --color-label-primary: var(--mg-ink);
    --color-label-secondary: var(--mg-muted);
    --separator-default: var(--mg-line);
    --surface-muted: var(--mg-paper);
}

/* ── Logo (marca reutilizable) ─────────────────────────────────────────── */
.mg-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mg-logo__mark { display: block; flex: none; }
.mg-logo__text { font-family: var(--mg-font); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.mg-logo__text b { font-weight: 800; }
.mg-logo__text span { font-weight: 400; opacity: .72; }
.mg-logo--sm .mg-logo__text { font-size: 17px; }
.mg-logo--md .mg-logo__text { font-size: 21px; }
.mg-logo--lg .mg-logo__text { font-size: 28px; }

/* ── Utilidades compartidas ────────────────────────────────────────────── */
.mg-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 99px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 11px; border: 1px solid transparent;
    font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
    text-decoration: none; transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
.mg-btn:hover { transform: translateY(-1px); }
.mg-btn--primary { background: linear-gradient(115deg, var(--mg-aqua), #6EE7DA); color: #062421; }
.mg-btn--primary:hover { filter: brightness(1.06); }
.mg-btn--ghost { border-color: rgba(243, 231, 201, .35); color: var(--mg-moon); background: transparent; }
.mg-btn--ghost:hover { border-color: var(--mg-aqua); }
.mg-btn--ink { background: var(--color-brand-primary); color: #fff; }