/* =====================================================================
   Drop Business: tokens de diseño (mismos colores que /landing)
   Amarillo #f1d50c sobre negro. Las secciones .dark (cabecera, hero,
   departamentos, contacto, pie) son siempre oscuras; el resto sigue el tema.
   ===================================================================== */
:root {
    --brand: #f1d50c;
    --brand-2: #f59e0b;
    --on-brand: #111111;
    --brand-soft: rgba(241, 213, 12, .16);
    --accent-text: #6b5d00;          /* amarillo legible sobre fondo claro (AA) */
    --ink: #0b0b0b;

    --bg: #ffffff;
    --bg-alt: #f6f6f3;
    --surface: #ffffff;
    --surface-2: #f1f1ec;
    --text: #111318;
    --muted: #555b66;
    --line: #e5e5df;

    --dark-bg: #0b0b0b;
    --dark-bg-2: #121212;
    --dark-surface: #171717;
    --dark-surface-2: #1f1f1f;
    --dark-text: #f3f3f0;
    --dark-muted: #a6a6a0;
    --dark-line: #2a2a2a;

    --ok: #16a34a;
    --err: #dc2626;
    --todo: #c2410c;                 /* marcadores [X] pendientes */

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(17, 19, 24, .05), 0 12px 32px rgba(17, 19, 24, .07);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .28);

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --wrap: 1200px;
    --gutter: 16px;
    --header-h: 68px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-soft: rgba(241, 213, 12, .12);
        --accent-text: #f1d50c;
        --bg: #0e0e0e; --bg-alt: #131313; --surface: #181818; --surface-2: #212121;
        --text: #f2f2ee; --muted: #a8a8a2; --line: #2b2b2b;
        --todo: #fb923c;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --brand-soft: rgba(241, 213, 12, .12);
    --accent-text: #f1d50c;
    --bg: #0e0e0e; --bg-alt: #131313; --surface: #181818; --surface-2: #212121;
    --text: #f2f2ee; --muted: #a8a8a2; --line: #2b2b2b;
    --todo: #fb923c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

@media (min-width: 768px) {
    :root { --gutter: 32px; }
}