/* theme.css — tokens de diseño Hub Carwash (referencia: Minimal UI Kit v7.7).
 * Claro en :root, oscuro en [data-theme="dark"]. Colores en canales RGB
 * para que Tailwind los use con /alpha: rgb(var(--primary-main) / .16). */

:root {
    /* Primario = acento oficial de HUB Carwash (brand kit SuiteHub → products.carwash, rampa Tailwind sky) */
    --primary-lighter: 224 242 254; --primary-light: 56 189 248;  --primary-main: 2 132 199;
    --primary-dark: 3 105 161;      --primary-darker: 12 74 110;  --primary-contrast: 255 255 255;
    /* Acento (CTA) = el mismo sky del producto. El rojo queda solo para error/destructivo (--error-*). */
    --accent-lighter: var(--primary-lighter); --accent-light: var(--primary-light); --accent-main: var(--primary-main);
    --accent-dark: var(--primary-dark);       --accent-darker: var(--primary-darker); --accent-contrast: var(--primary-contrast);
    /* Semánticos (Minimal) */
    --info-lighter: 202 253 245;    --info-light: 97 243 243;     --info-main: 0 184 217;
    --info-dark: 0 108 156;         --info-darker: 0 55 104;      --info-contrast: 255 255 255;
    --success-lighter: 211 252 210; --success-light: 119 237 139; --success-main: 34 197 94;
    --success-dark: 17 141 87;      --success-darker: 6 94 73;    --success-contrast: 255 255 255;
    --warning-lighter: 255 245 204; --warning-light: 255 214 102; --warning-main: 255 171 0;
    --warning-dark: 183 110 0;      --warning-darker: 122 65 0;   --warning-contrast: 28 37 46;
    --error-lighter: 255 233 213;   --error-light: 255 172 130;   --error-main: 255 86 48;
    --error-dark: 183 29 24;        --error-darker: 122 9 22;     --error-contrast: 255 255 255;
    /* Grises (Minimal) */
    --grey-50: 252 253 253; --grey-100: 249 250 251; --grey-200: 244 246 248; --grey-300: 223 227 232;
    --grey-400: 196 205 213; --grey-500: 145 158 171; --grey-600: 99 115 129; --grey-700: 69 79 91;
    --grey-800: 28 37 46;   --grey-900: 20 26 33;

    /* Superficies y texto — claro */
    --bg: 255 255 255;
    --paper: 255 255 255;
    --neutral: 244 246 248;
    --text: 28 37 46;
    --text-2: 99 115 129;
    --text-3: 145 158 171;
    --divider: rgba(145, 158, 171, .2);
    --border-soft: rgba(145, 158, 171, .12);
    --action-hover: rgba(145, 158, 171, .08);
    --action-selected: rgba(145, 158, 171, .16);
    --input-border: rgba(145, 158, 171, .2);
    --backdrop: rgba(28, 37, 46, .48);

    /* Sombras (Minimal custom-shadows) */
    --sh-color: 145 158 171;
    --shadow-z1: 0 1px 2px 0 rgb(var(--sh-color) / .16);
    --shadow-z8: 0 8px 16px 0 rgb(var(--sh-color) / .16);
    --shadow-z24: 0 24px 48px 0 rgb(var(--sh-color) / .16);
    --shadow-card: 0 0 2px 0 rgb(var(--sh-color) / .2), 0 12px 24px -4px rgb(var(--sh-color) / .12);
    --shadow-dropdown: 0 0 2px 0 rgb(var(--sh-color) / .24), -20px 20px 40px -4px rgb(var(--sh-color) / .24);
    --shadow-dialog: -40px 40px 80px -8px rgba(0, 0, 0, .24);

    /* Forma y tipografía */
    --radius: 8px;
    --radius-card: 16px;
    --radius-popover: 10px;
    --radius-label: 6px;
    --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Barlow", "Public Sans", ui-sans-serif, system-ui, sans-serif;

    /* Layout */
    --nav-width: 300px;
    --nav-mini-width: 88px;
    --header-h: 64px;

    color-scheme: light;
}

@media (min-width: 1200px) { :root { --header-h: 72px; } }

/* Acento por instancia (ajuste `acento`, ver ui_acento() en helpers.php). Sky es el default de :root;
 * "rojo" es la marca de Royal Car Wash. El acento/CTA sigue al primario vía var(). */
:root[data-accent="rojo"] {
    --primary-lighter: 254 226 226; --primary-light: 248 113 113; --primary-main: 225 29 42;
    --primary-dark: 179 18 30;      --primary-darker: 127 29 29;  --primary-contrast: 255 255 255;
}

[data-theme="dark"] {
    --bg: 20 26 33;
    --paper: 28 37 46;
    --neutral: 40 50 61;
    --text: 255 255 255;
    --text-2: 145 158 171;
    --text-3: 99 115 129;
    --sh-color: 0 0 0;
    --backdrop: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

/* ---------------------------------------------------------------- Base */
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5714;
    background: rgb(var(--bg));
    color: rgb(var(--text));
    -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }

.font-display { font-family: var(--font-display); }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.5; }
@media (min-width: 900px) { .h3 { font-size: 1.875rem; } }
.h4 { font-weight: 700; font-size: 1.25rem; line-height: 1.5; }
@media (min-width: 900px) { .h4 { font-size: 1.5rem; } }
.h5 { font-weight: 700; font-size: 1.125rem; line-height: 1.5; }
.h6 { font-weight: 600; font-size: 1.0625rem; line-height: 1.5556; }
.subtitle1 { font-weight: 600; font-size: 1rem; line-height: 1.5; }
.subtitle2 { font-weight: 600; font-size: .875rem; line-height: 1.5714; }
.body2 { font-size: .875rem; line-height: 1.5714; }
.caption { font-size: .75rem; line-height: 1.5; }
.text-overline { font-size: .75rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .02em; }
.text-1 { color: rgb(var(--text)); }
.text-2 { color: rgb(var(--text-2)); }
.text-3 { color: rgb(var(--text-3)); }
.bg-paper { background: rgb(var(--paper)); }
.bg-neutral { background: rgb(var(--neutral)); }
.border-divider { border-color: var(--divider); }
.divider-dashed { border: 0; border-top: 1px dashed var(--divider); }

a { color: inherit; text-decoration: none; }
.link { color: rgb(var(--primary-main)); font-weight: 600; }
.link:hover { text-decoration: underline; }
[data-theme="dark"] .link { color: rgb(var(--primary-light)); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(145, 158, 171, .32); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgb(var(--primary-main) / .2); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: rgb(var(--primary-main)); }

iconify-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }