/* ================================================================
   THEMES.CSS — Vivlo keukenstijlen + animatiesysteem
   Bevat: CSS easing/timing vars (10.1) + 3 thema's (11.1)
   ================================================================ */

/* -- 10.1: Easing + timing systeem -------------------------------- */
:root {
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-fast: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-default:  cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-instant:   80ms;
  --dur-fast:      160ms;
  --dur-normal:    240ms;
  --dur-slow:      380ms;
  --dur-xslow:     560ms;

  /* Thema-ambient kleur (tijdgebonden — wordt via JS gezet) */
  --theme-ambient-color: transparent;
}

/* -- Ambient glow: zachte achtergrondtint, volledig onzichtbaar
      als --theme-ambient-color transparent is --------------------*/
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--theme-ambient-color);
  pointer-events: none;
  z-index: 0;
  transition: background var(--dur-xslow) var(--ease-smooth);
}

/* ================================================================
   SCANDINAVISCH (default) — geen override nodig, :root is al
   Scandinavisch: donker groen, clean, gebalanceerd
   ================================================================ */
[data-theme="scandinavisch"] {
  /* Identiek aan :root in 01-main.css — expliciet herhalen voor
     thema-overgang via JS classList */
}

/* ================================================================
   JAPANS — washi beige, minimaal, traag
   ================================================================ */
[data-theme="japans"] {
  /* Accent: zachte sage-groen (gedempter dan Scandinavisch) */
  --accent:       #6a9a5a;
  --accent2:      #4a7540;
  --accent-light: rgba(106,154,90,.1);
  --accent-glow:  rgba(106,154,90,.05);

  /* Achtergrond: iets warmer zwart */
  --bg:      #0a0907;
  --bg2:     #110f0c;
  --panel:   #171410;
  --panel2:  #1c1814;
  --border:  #242018;
  --border2: #2c261e;

  /* Tekst: iets warmer wit */
  --text:    #e8e0d4;
  --sub:     #7a7060;
  --dim:     #3a3428;

  /* Typography: geen font override (geen extra load),
     maar grotere letterafstand voor rust */
  letter-spacing: 0.02em;

  /* Radius: scherper, meer Japanse precisie */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;

  /* Animaties: langzamer, bedachtzamer */
  --dur-fast:   220ms;
  --dur-normal: 360ms;
  --dur-slow:   520ms;
  --ease-spring: cubic-bezier(0.2, 0, 0, 1);
}

/* ================================================================
   ITALIAANS — terra cotta, warm, expressief
   ================================================================ */
[data-theme="italiaans"] {
  /* Accent: terra cotta / warm oranje-rood */
  --accent:       #d4763a;
  --accent2:      #b05828;
  --accent-light: rgba(212,118,58,.1);
  --accent-glow:  rgba(212,118,58,.06);

  /* Warm als primaire kleur (oranje licht worden warmer) */
  --warm:         #c85020;
  --warm2:        #e8703a;
  --warm-light:   rgba(200,80,32,.1);

  /* Achtergrond: warmer donker */
  --bg:      #0e0904;
  --bg2:     #150c05;
  --panel:   #1c1208;
  --panel2:  #22160a;
  --border:  #281a0e;
  --border2: #32200e;

  /* Tekst: warmer tint */
  --text:    #ede0d0;
  --sub:     #8a7060;
  --dim:     #3a2c1c;

  /* Radius: ronder, vriendelijker */
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Animaties: iets levendiger */
  --dur-fast:    140ms;
  --dur-normal:  200ms;
  --ease-spring: cubic-bezier(0.5, 1.8, 0.6, 1);
}

/* ================================================================
   THEMA OVERGANG — vloeiende switch
   ================================================================ */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color var(--dur-xslow) var(--ease-smooth),
    color            var(--dur-xslow) var(--ease-smooth),
    border-color     var(--dur-xslow) var(--ease-smooth) !important;
}

/* ================================================================
   BOOM FASE ANIMATIE (10.6)
   ================================================================ */
@keyframes boomFaseIn {
  from { transform: scale(0.75); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.boom-fase-chip.fase-nieuw {
  animation: boomFaseIn var(--dur-slow) var(--ease-spring);
}

/* ================================================================
   THEMA KIEZER UI (11.4)
   ================================================================ */
.theme-picker {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .2rem;
  scrollbar-width: none;
}
.theme-picker::-webkit-scrollbar { display: none; }

.theme-card {
  flex-shrink: 0;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border2);
  background: var(--panel);
  cursor: pointer;
  text-align: center;
  min-width: 90px;
  transition: border-color var(--dur-fast) var(--ease-smooth),
              background   var(--dur-fast) var(--ease-smooth);
}
.theme-card:hover { border-color: var(--accent); }
.theme-card.actief {
  border-color: var(--accent);
  background: var(--accent-light);
}
.theme-card .theme-preview {
  display: flex;
  gap: .25rem;
  justify-content: center;
  margin-bottom: .4rem;
}
.theme-card .theme-preview span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.theme-card span:last-child {
  font-size: .72rem;
  font-weight: 600;
  color: var(--sub);
}

/* ================================================================
   11.6: KOOKMODUS PER THEMA
   Scandinavisch = standaard groen (geen override nodig)
   Japans = strak, minimalistische timer-badge als getal
   Italiaans = warm, grote tekst, oranje timer-ring
   ================================================================ */

/* --- JAPANS kookmodus --- */
[data-theme="japans"] #kookModusHeader {
  border-bottom-color: var(--border2);
  background: var(--bg2);
}
[data-theme="japans"] #kookModusStapTekst {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.8;
}
[data-theme="japans"] .kook-nav-btn {
  border-radius: var(--r-sm) !important;
}
[data-theme="japans"] #kookTimerBadgesRow .kook-timer-badge {
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: .15rem .45rem;
  min-width: 3.5rem;
  text-align: center;
  color: var(--accent);
}
[data-theme="japans"] #kookModusFooter {
  background: var(--bg2);
  border-top-color: var(--border2);
}

/* --- ITALIAANS kookmodus --- */
[data-theme="italiaans"] #kookModusHeader {
  border-bottom-color: var(--border2);
  background: linear-gradient(180deg, var(--panel2) 0%, var(--bg2) 100%);
}
[data-theme="italiaans"] #kookModusStapTekst {
  font-size: 1.48rem;
  font-weight: 700;
  line-height: 1.55;
}
[data-theme="italiaans"] .kook-nav-btn {
  border-radius: var(--r-lg) !important;
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
}
[data-theme="italiaans"] #kookTimerBadgesRow .kook-timer-badge {
  background: var(--accent-light);
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  color: var(--accent);
  flex-direction: column;
  line-height: 1.1;
}
[data-theme="italiaans"] #kookModusFooter {
  background: linear-gradient(0deg, var(--panel2) 0%, transparent 100%);
  border-top-color: var(--accent-light);
  gap: .5rem;
}