/* ==========================================================================
   SPOT-ON — base.css
   Design tokens, reset, typography, app shell.
   Kleuren zijn afgeleid van het officiële Spot-On logo (koper op crème).
   Pas kleuren, fonts of afstanden hier aan — alle schermen gebruiken deze
   variabelen, dus een wijziging hier werkt overal door.
   ========================================================================== */

:root {
  /* ---- Merkkleuren (uit logo) ---- */
  --copper:        #B8794A;   /* primaire accentkleur */
  --copper-dark:   #8A5A31;   /* donker koper — headers, actieve staten */
  --copper-deep:   #5F3B1F;   /* diepste koper — tekst-op-koper, schaduw */
  --copper-light:  #E8C7A0;   /* lichte koper — badges, hover-vlakken */
  --copper-mist:   #F3E4D2;   /* zeer lichte koper — subtiele vlakken */

  /* ---- Secundaire accent (Drinks) ---- */
  --wine:          #6E2A3B;
  --wine-light:    #F3DCE1;

  /* ---- Neutralen ---- */
  --cream:         #FBF7F1;   /* app-achtergrond */
  --surface:       #FFFFFF;   /* kaarten, panelen */
  --surface-alt:   #F5EFE6;   /* alternatieve paneelkleur */
  --ink:           #211C18;   /* hoofdtekst */
  --ink-soft:      #4A4239;   /* secundaire tekst */
  --muted:         #8B8178;   /* placeholder / tertiaire tekst */
  --line:          #E7DFD3;   /* haarlijnen / randen */
  --line-strong:   #D8CBB8;

  /* ---- Functioneel ---- */
  --success:       #3F7D5C;
  --success-bg:    #E4F0E9;
  --danger:        #A6412F;
  --danger-bg:     #FBE7E2;
  --warning:       #B8863A;
  --warning-bg:    #FBF0DD;

  /* ---- Typografie ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Vorm & ruimte ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(33, 28, 24, 0.06), 0 1px 1px rgba(33, 28, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(90, 60, 30, 0.12);
  --shadow-lg: 0 16px 40px rgba(90, 60, 30, 0.18);
  --header-h: 60px;
  --tabbar-h: 76px;   /* gereserveerde ruimte: zwevende capsule (64px) + zweefafstand (12px) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- App-achtergrond: subtiele, moderne gradient op basis van de
     bestaande merkkleuren. Twee zachte radial-gradient-glows (diepte) over
     een vloeiende diagonale linear-gradient (cream -> copper-mist). Eén
     centrale definitie — gebruikt door zowel #app als body, zodat elk
     scherm automatisch dezelfde achtergrond krijgt zonder duplicatie. ---- */
  /* Premium Edition: "natuurlijk licht" op de bestaande crème — een
     bijna witte gloed linksboven, een vleugje koper rechtsboven en een
     zachte crème-gloed onderaan, over een rustige crème -> copper-mist
     overgang. Zeer grote, zachte vlakken: geen zichtbare cirkels. */
  --app-bg-gradient:
    radial-gradient(1300px 820px at -6% -14%, rgba(255, 255, 255, 0.78), transparent 62%),
    radial-gradient(1100px 700px at 112% -4%, rgba(232, 199, 160, 0.30), transparent 60%),
    radial-gradient(1200px 760px at 50% 118%, rgba(243, 228, 210, 0.70), transparent 64%),
    linear-gradient(172deg, var(--cream) 0%, #F8F1E7 55%, var(--copper-mist) 100%);

  /* ---- Premium Edition — visueel systeem (afgeleid van de bestaande
     kleuren, geen nieuwe kleuridentiteit) ---- */
  --surface-soft:        #FDFAF6;                     /* zachte crèmezone tussen achtergrond en kaart */
  --card-border:         rgba(138, 90, 49, 0.11);     /* --copper-dark op lage dekking */
  --card-shadow:         0 1px 2px rgba(95, 59, 31, 0.05), 0 10px 26px -10px rgba(95, 59, 31, 0.16);
  --card-shadow-pressed: 0 1px 2px rgba(95, 59, 31, 0.07), 0 4px 12px -8px rgba(95, 59, 31, 0.16);
  --divider-warm:        rgba(184, 121, 74, 0.20);    /* --copper op lage dekking */
  --icon-bg:             var(--copper-mist);
  --icon-fg:             var(--copper-deep);
  --ease-fast:           cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast:            140ms;

  /* ---- Seizoensachtergrondfoto — Fase 2 (herzien). Standaard "none":
     geen enkel visueel effect totdat er daadwerkelijk een seizoen actief
     is. De URL wordt later door JavaScript ingevuld (uit Firestore, via
     het adminpaneel) — nooit hardcoded per seizoen in CSS. Raakt uitsluitend
     de achtergrond aan; --copper/--wine/enz. (de huisstijl) blijven volledig
     onaangeroerd. Toegepast als extra achtergrondlaag op #app zelf (zie
     verderop) — geen pseudo-element, geen z-index nodig. ---- */
  --season-bg-image: none;
  /* Uitsnede-positie van de seizoensbanner-foto -- apart van de URL zelf,
     want elke foto heeft zijn eigen compositie. "center 30%" is de eerste
     testwaarde voor de huidige Halloween-foto; een toekomstig thema kan
     hier later zijn eigen, optimale waarde krijgen zonder dat --season-
     bg-image zelf hoeft te wijzigen. */
  --season-bg-position: center 30%;
}

/* ---- Donkere modus — zelfde variabelenamen als :root hierboven, enkel
   donkere waarden. :root zelf blijft de standaard (lichte modus),
   volledig ongewijzigd. Geactiveerd via [data-theme="dark"] op <html>,
   gezet door bootApp() in app.js op basis van de opgeslagen voorkeur
   (localStorage "spoton_theme") of, bij "auto",
   prefers-color-scheme. ---- */
[data-theme="dark"] {
  --copper:        #C88E5C;
  --copper-dark:   #D9A874;
  --copper-deep:   #E8C7A0;
  --copper-light:  #6B4A2E;
  --copper-mist:   #3A2E22;

  --wine:          #C97D8D;
  --wine-light:    #3D2229;

  --cream:         #1C1815;
  --surface:       #241F1B;
  --surface-alt:   #2C2620;
  --ink:           #F2ECE3;
  --ink-soft:      #C9BFB2;
  --muted:         #8F8577;
  --line:          #3A332C;
  --line-strong:   #4A4238;

  --success:       #6FBF93;
  --success-bg:    #1E332A;
  --danger:        #E08272;
  --danger-bg:     #3A211D;
  --warning:       #E0B978;
  --warning-bg:    #3A2E1A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  --app-bg-gradient:
    radial-gradient(1300px 820px at -6% -14%, rgba(107, 74, 46, 0.34), transparent 62%),
    radial-gradient(1100px 700px at 112% -4%, rgba(200, 142, 92, 0.12), transparent 60%),
    radial-gradient(1200px 760px at 50% 118%, rgba(58, 46, 34, 0.55), transparent 64%),
    linear-gradient(172deg, var(--cream) 0%, #201A16 55%, #241D17 100%);

  --surface-soft:        #211C18;
  --card-border:         rgba(232, 199, 160, 0.09);
  --card-shadow:         0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -12px rgba(0, 0, 0, 0.60);
  --card-shadow-pressed: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px -8px rgba(0, 0, 0, 0.55);
  --divider-warm:        rgba(200, 142, 92, 0.22);
}

/* ---- Reset ---- */
* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; height: 100dvh; }
body {
  margin: 0;
  background: var(--app-bg-gradient);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
h1, h2, h3, h4, p, figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font: inherit; color: inherit; }

button, [role="button"] { cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--copper-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Typografie hulpklassen ---- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-dark);
  line-height: 1.4;
}
.muted { color: var(--muted); }
.text-soft { color: var(--ink-soft); }

/* diamant-divider — zelfde motief als in het logo */
.divider-diamond {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--copper);
}
.divider-diamond::before,
.divider-diamond::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.divider-diamond .diamond {
  width: 6px; height: 6px;
  background: var(--copper);
  transform: rotate(45deg);
  flex: none;
}

/* ---- App shell ---- */
#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--app-bg-gradient);
  position: relative;
  box-shadow: 0 0 60px rgba(0,0,0,0.05);
}
/* background-attachment: fixed enkel op toestellen met een precieze pointer
   (desktop/muis) — op touchtoestellen (vooral iOS Safari) veroorzaakt fixed
   in combinatie met scrollende containers bekende rendering-/performance-
   problemen, vandaar bewust NIET universeel toegepast. */
@media (pointer: fine) {
  #app { background-attachment: fixed; }
}

.screen {
  display: none;
  min-height: 100%;
  padding-top: calc(var(--header-h) + var(--safe-top));
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  animation: screen-in 0.22s ease;
}
.screen.is-active { display: block; }
.screen[data-chrome="none"] { padding-top: 0; padding-bottom: 0; }
#screen-onboarding.is-active { display: flex; flex-direction: column; justify-content: center; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen-body {
  padding: 18px 18px 8px;
}
.section {
  margin-bottom: 26px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* ---- Scrollbar (webview) ---- */
::-webkit-scrollbar { width: 0; height: 0; }