/* CycloPilot public site — appearance system, same as access.cyclopilot.app.
   Internal ids: 'asfalto' (dark) and 'terracota' (light). Visitors only see Oscuro / Claro / Automático (Dark / Light / Automatic).
   Values are the approved palettes of Access (styles/globals.css of v4-themes); ASFALTO = the site's existing look, unchanged.
   Both blocks define the same variables; pages only read variables. Without JavaScript the page stays dark. */
:root, html[data-theme="asfalto"] {
  color-scheme: dark;
  --bg: #0A0A0A; --deep: #050505; --bg-2: #1E1E1E;
  --text: #FAFAFA; --body: #CFCFCF; --soft: #C4A57B; --mute: #A28F77;
  --ink: #FAFAFA; --ink-2: #CFCFCF; --ink-3: #A28F77;
  --amber: #E8A547; --amber-t: #E8A547; --amber-rgb: 232, 165, 71; --on-amber: #1A1204;
  --line: rgba(232, 165, 71, .08); --hairline: #383838;
  --eyebrow-bg: rgba(30, 30, 30, .7);
  --glow-home: rgba(232, 165, 71, .07); --glow-legal: rgba(232, 165, 71, .06); --status-ring: rgba(232, 165, 71, .18);
  --theme-icon-moon: block; --theme-icon-sun: none;
}
html[data-theme="terracota"] {
  color-scheme: light;
  --bg: #EDE8DC; --deep: #EDE8DC; --bg-2: #E5DFD0;
  --text: #2A2317; --body: #5A5040; --soft: #675A43; --mute: #675A43;
  --ink: #2A2317; --ink-2: #5A5040; --ink-3: #675A43;
  --amber: #A95610; --amber-t: #8A4A12; --amber-rgb: 169, 86, 16; --on-amber: #FFFFFF;
  --line: rgba(181, 101, 29, .10); --hairline: #C5BA9E;
  --eyebrow-bg: rgba(229, 223, 208, .7);
  --glow-home: rgba(181, 101, 29, .10); --glow-legal: rgba(181, 101, 29, .09); --status-ring: rgba(169, 86, 16, .18);
  --theme-icon-moon: none; --theme-icon-sun: block;
}

/* ~300 ms on colours, backgrounds and borders only, while theme.js flips data-theme (never `all`); none with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, stop-color !important;
    transition-duration: 300ms !important; transition-timing-function: ease !important; transition-delay: 0s !important;
  }
}

/* header: language + appearance toggle (44 px box, quiet, like Access) */
.header-end { display: flex; align-items: center; }
.theme-btn { min-width: 44px; height: 44px; margin: -5px 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .icon-moon { display: var(--theme-icon-moon); }
.theme-btn .icon-sun { display: var(--theme-icon-sun); }
@media (max-width: 700px) { .theme-btn { margin: -7px 0; } }

/* footer: Oscuro · Claro · Automático (native radios, whole tile is the hit area; choosing does not navigate) */
.appearance { flex: 0 0 100%; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; font-size: 14px; letter-spacing: 0; }
.appearance legend { padding: 0 0 8px; font-size: 12px; color: var(--mute); }
.appearance-opts { display: inline-grid; grid-auto-flow: column; gap: 8px; }
.appearance-opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: 10px; background: none; color: var(--body); font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.appearance-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.appearance-opt:has(input:checked) { border-color: var(--amber); background: rgba(var(--amber-rgb), .1); box-shadow: inset 0 0 0 1px var(--amber); color: var(--text); }
.appearance-opt:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (max-width: 700px) { .appearance-opt { padding: 0 12px; } .appearance-opts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; } }
