/* ═══════════════════════════════════════════════════════════
   InventarioApp — "Editorial Corporativa" CSS Variables
   Este archivo define las variables CSS necesarias para
   la landing page rediseñada. Debe cargarse en _LayoutPublic.cshtml
   después de site-public.css.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Brand accent (mapped to --dash-*) ── */
    --accent: var(--dash-accent, #FF6B00);
    --accent-hover: var(--dash-accent-hover, #e65f00);
    --accent-light: var(--dash-accent-light, rgba(255, 107, 0, 0.12));

    /* ── Backgrounds ── */
    --bg-primary: var(--dash-bg-body, #FAFAF8);
    --bg-secondary: var(--dash-bg-body, #FAFAF8);
    --bg-card: var(--dash-bg-card, #FFFFFF);
    --bg-dark: #0C0C0E;
    --bg-dark-surface: var(--dash-bg-card, #1a1a1e);

    /* ── Text ── */
    --text-primary: var(--dash-text-primary, #1d1d1f);
    --text-secondary: var(--dash-text-secondary, #6e6e73);
    --text-muted: var(--dash-text-muted, #86868b);

    /* ── Borders ── */
    --border-subtle: var(--dash-border-subtle, #e8e8ed);

    /* ── Fonts ── */
    --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body: var(--dash-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Radius ── */
    --radius-lg: var(--dash-radius-lg, 0.75rem);
    --radius-xl: var(--dash-radius-xl, 1rem);
    --radius-2xl: 1.25rem;
}

/* ── Dark mode overrides (inherit from --dash-* dark values) ── */
[data-theme="dark"] {
    --bg-primary: var(--dash-bg-body, #0C0C0E);
    --bg-secondary: var(--dash-bg-body, #141416);
    --bg-card: var(--dash-bg-card, #1a1a1e);
    --text-primary: var(--dash-text-primary, #f5f5f7);
    --text-secondary: var(--dash-text-secondary, #a1a1a6);
    --text-muted: var(--dash-text-muted, #6e6e73);
    --border-subtle: var(--dash-border-subtle, #2c2c30);
}

/* ── Utility classes for the landing ── */
.text-center-pub { text-align: center; }
.pub-mb-6 { margin-bottom: 1.5rem; }
.pub-mb-8 { margin-bottom: 2rem; }
.pub-mb-10 { margin-bottom: 2.5rem; }
.pub-mb-14 { margin-bottom: 3.5rem; }
.pub-mt-8 { margin-top: 2rem; }
.pub-max-w-xl { max-width: 36rem; }
.pub-max-w-2xl { max-width: 42rem; }
.pub-mx-auto { margin-left: auto; margin-right: auto; }

.text-body-pub {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.btn-link-pub {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-link-pub:hover { text-decoration: underline; }

/* ── Currency toggle ── */
.currency-toggle {
    display: inline-flex;
    background: var(--bg-dark-surface);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9999px;
    padding: 0.25rem;
    gap: 0.25rem;
}
.currency-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    color: var(--dash-text-muted, #6e6e73);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.currency-btn:hover { color: var(--dash-text-inverse, #fff); }
.currency-btn.active {
    background: var(--accent);
    color: var(--dash-text-inverse, #fff);
}