/*
 * Variables y estilos globales.
 * Los temas (resources/themes/*) y los colores del comercio sobrescriben estas variables
 * desde un <style nonce> que el layout imprime DESPUÉS de las hojas de estilo.
 */
:root {
    /* Marca (la BD del comercio las sobrescribe) */
    --color-primary: #1d4ed8;
    --color-secondary: #0f172a;
    --on-primary: #ffffff;

    /* Neutros y estados */
    --color-text: #111827;
    --color-muted: #6b7280;
    --color-bg: #ffffff;
    --color-surface: #f3f4f6;
    --color-border: #d1d5db;
    --color-success: #15803d;
    --color-success-bg: #f0fdf4;
    --color-danger: #b91c1c;
    --color-danger-bg: #fef2f2;

    /* Forma y tipografía (los temas las cambian) */
    --radius: 8px;
    --radius-pill: 999px;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: var(--font-body);
    --heading-transform: none;
    --heading-weight: 700;
    --heading-spacing: normal;
    --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .06);
    --space: 1rem;

    /* Cabecera, menú y portada */
    --header-bg: var(--color-secondary);
    --header-color: #ffffff;
    --header-border: transparent;
    --nav-bg: var(--color-primary);
    --nav-color: #ffffff;
    --hero-bg: var(--color-primary);
    --hero-color: #ffffff;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-spacing);
    line-height: 1.2;
}

h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: .75rem; }
h3 { font-size: 1.1rem; }

p + p { margin-top: .75rem; }

a { text-underline-offset: .15em; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

::selection { background: var(--color-primary); color: var(--on-primary); }

.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }