/* Light theme preview. Inert unless is set (add ?claro to the URL).
The dark site is untouched, so both versions can be shown side by side before deciding. */
:root[data-tema="claro"] {
--night: #FFFFFF; /* page */
--coal: #F6F4F0; /* warm off-white bands */
--coal-2: #FFFFFF; /* cards */
--line: rgba(22, 21, 15, 0.12);
--bone: #16150F; /* main text, and the fill of inverted pills */
--ash: #6B665C; /* secondary text */
--amber: #B26A12; /* accent for text: deep enough to read on white */
--amber-hot: #8A5008;
color-scheme: light;
}
:root[data-tema="claro"] html,
:root[data-tema="claro"] body { background: var(--night); color: var(--bone); }
:root[data-tema="claro"] ::selection { background: #FFE2B8; color: #16150F; }
/* Buttons: black is calmer and more premium on white than an orange fill */
:root[data-tema="claro"] .btn-primary { background: #16150F; color: #FFFFFF; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6); }
:root[data-tema="claro"] .btn-primary:hover { background: #33302A; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.5); }
:root[data-tema="claro"] .btn-ghost { color: #16150F; background: #FFFFFF; border-color: rgba(22, 21, 15, 0.18); backdrop-filter: none; }
:root[data-tema="claro"] .btn-ghost:hover { border-color: rgba(22, 21, 15, 0.4); background: #F6F4F0; }
:root[data-tema="claro"] .skip { background: #16150F; color: #FFFFFF; }
/* Nav */
:root[data-tema="claro"] .brand-logo { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18)); }
/* Hero stage: a bright studio instead of a dark room */
:root[data-tema="claro"] .glow {
background:
radial-gradient(60% 60% at 70% 52%, rgba(255, 178, 76, 0.14), transparent 70%),
linear-gradient(#FFFFFF, #ECE8E1);
}
:root[data-tema="claro"] .glow::after { opacity: 0.035; mix-blend-mode: multiply; }
:root[data-tema="claro"] .backword { -webkit-text-stroke-color: rgba(22, 21, 15, 0.07); }
:root[data-tema="claro"] .silhouette svg { filter: drop-shadow(0 6px 18px rgba(178, 106, 18, 0.22)); }
:root[data-tema="claro"] .stage-sticky::after {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.6) 34%, rgba(255, 255, 255, 0) 58%);
}
:root[data-tema="claro"] h1 em { -webkit-text-stroke-color: var(--amber); }
/* Bands */
:root[data-tema="claro"] .marquee { background: #F1EEE8; }
:root[data-tema="claro"] .stock { background: linear-gradient(#F6F4F0, #FFFFFF 320px); }
:root[data-tema="claro"] .visit { background: linear-gradient(#FFFFFF, #F6F4F0); }
:root[data-tema="claro"] .visit-sil { color: rgba(22, 21, 15, 0.05); }
:root[data-tema="claro"] .card { background: #FFFFFF; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.45); }
:root[data-tema="claro"] .facts a { text-decoration-color: rgba(22, 21, 15, 0.3); }
/* Filters */
:root[data-tema="claro"] .chip { background: #FFFFFF; border-color: rgba(22, 21, 15, 0.16); }
:root[data-tema="claro"] .chip:hover { border-color: rgba(22, 21, 15, 0.4); }
:root[data-tema="claro"] .chip.is-active { background: #16150F; border-color: #16150F; color: #FFFFFF; }
/* Bike cards */
:root[data-tema="claro"] .bike { box-shadow: 0 14px 40px -28px rgba(0, 0, 0, 0.5); }
:root[data-tema="claro"] .bike:hover { box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.45); }
:root[data-tema="claro"] .bike-media {
background:
radial-gradient(70% 55% at 50% 62%, color-mix(in srgb, var(--bike-color) 14%, transparent), transparent 72%),
linear-gradient(#F4F1EB, #E8E4DC);
}
:root[data-tema="claro"] .bike-media::after { background: linear-gradient(90deg, transparent, rgba(22, 21, 15, 0.14), transparent); }
:root[data-tema="claro"] .bike-media .bike-photo { background: #EFECE5; }
:root[data-tema="claro"] .bike-specs li { background: #F2EFE9; }
:root[data-tema="claro"] .status { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(22, 21, 15, 0.1); }
:root[data-tema="claro"] .status.is-available { color: #1D7A45; }
:root[data-tema="claro"] .status.is-held { color: #9A5A0B; }
:root[data-tema="claro"] .status.is-sold { color: #6B665C; }
:root[data-tema="claro"] .bike-more { background: #16150F; color: #FFFFFF; }
:root[data-tema="claro"] .bike-sil { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--bike-color) 28%, transparent)); }
/* Detail sheet */
:root[data-tema="claro"] .sheet { color: var(--bone); }
:root[data-tema="claro"] .sheet::backdrop { background: rgba(38, 35, 30, 0.42); }
:root[data-tema="claro"] .sheet-inner { box-shadow: 0 40px 110px -40px rgba(0, 0, 0, 0.5); }
:root[data-tema="claro"] .sheet-media {
background:
radial-gradient(70% 55% at 50% 58%, color-mix(in srgb, var(--bike-color) 16%, transparent), transparent 72%),
linear-gradient(#F4F1EB, #E8E4DC);
}
:root[data-tema="claro"] .sheet-media::after { background: linear-gradient(90deg, transparent, rgba(22, 21, 15, 0.16), transparent); }
:root[data-tema="claro"] .sheet-media.has-photos { background: #F1EEE8; }
:root[data-tema="claro"] .sheet-close { background: rgba(255, 255, 255, 0.86); border-color: rgba(22, 21, 15, 0.14); color: #16150F; }
:root[data-tema="claro"] .sheet-close:hover { background: #16150F; color: #FFFFFF; }
:root[data-tema="claro"] .gallery-nav { background: rgba(255, 255, 255, 0.86); border-color: rgba(22, 21, 15, 0.14); color: #16150F; }
:root[data-tema="claro"] .gallery-nav:hover:not(:disabled) { background: #16150F; color: #FFFFFF; }
:root[data-tema="claro"] .gallery-count { background: rgba(255, 255, 255, 0.88); color: #16150F; border: 1px solid rgba(22, 21, 15, 0.1); }
/* Waiting-list form */
:root[data-tema="claro"] .field input,
:root[data-tema="claro"] .field select,
:root[data-tema="claro"] .field textarea { background-color: #FFFFFF; border-color: rgba(22, 21, 15, 0.2); color: #16150F; }
:root[data-tema="claro"] .field input::placeholder,
:root[data-tema="claro"] .field textarea::placeholder { color: #9A958B; }
:root[data-tema="claro"] .field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236B665C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-tema="claro"] .form-error { color: #B3261E; }
:root[data-tema="claro"] .field [aria-invalid="true"] { border-color: #B3261E; }
:root[data-tema="claro"] .wait-check { color: #128C7E; }
/* Progress rail and scroll hint read as grey, not glowing orange */
:root[data-tema="claro"] .progress { background: rgba(22, 21, 15, 0.14); }
:root[data-tema="claro"] .progress span { background: #16150F; }
:root[data-tema="claro"] .scroll-hint i { background: linear-gradient(#B26A12, transparent); }
@media (max-width: 899px) {
:root[data-tema="claro"] .glow {
background: radial-gradient(90% 40% at 50% 33%, rgba(255, 178, 76, 0.16), transparent 70%), linear-gradient(#FFFFFF, #ECE8E1);
}
:root[data-tema="claro"] .backword { -webkit-text-stroke-color: rgba(22, 21, 15, 0.06); }
/* on phones the scrim sits at the bottom behind the headline, not on the left */
:root[data-tema="claro"] .stage-sticky::after {
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 42%);
}
}
/* The waiting list is the one block on the page that should stop you */
:root[data-tema="claro"] .wait-band {
background: linear-gradient(#FFF6E9, #FFEFD9);
border-color: rgba(178, 106, 18, 0.22);
}
:root[data-tema="claro"] .wait-band .eyebrow { color: #8A5008; }
:root[data-tema="claro"] .wait-band .lead { color: #4A443A; }
:root[data-tema="claro"] .wait-band-note { color: #6B6459; }
:root[data-tema="claro"] .wait-band .btn-primary { box-shadow: 0 14px 30px -14px rgba(22, 21, 15, 0.55); }
:root[data-tema="claro"] .map-square iframe { background: #ECE8E1; border: 1px solid rgba(22, 21, 15, 0.1); filter: none; }
:root[data-tema="claro"] .map-square iframe { background: #ECE8E1; border: 1px solid rgba(22, 21, 15, 0.1); filter: none; }