/* ── Contratista Theme Variables ── */
/* html[data-theme] heeft hogere specificiteit dan :root in inline styles */

/* Donker thema — Oscuro (standaard) */
html[data-theme="dark"] {
  --bg:          #0d0b08;
  --bg-2:        #131009;
  --surface:     #1a1610;
  --surface-2:   #22201a;
  --surface-3:   #2a2820;
  --border:      rgba(184,146,74,0.10);
  --border-h:    rgba(184,146,74,0.20);
  --text:        #f0ead8;
  --text-dim:    rgba(240,234,216,0.50);
  --text-muted:  rgba(240,234,216,0.28);
  --header-bg:   rgba(13,11,8,0.96);
  --header-glass: rgba(13,11,8,0.88);
}

/* Licht thema — Blanc */
html[data-theme="light"] {
  --bg:          #fdfaf5;
  --bg-2:        #f8f4ee;
  --surface:     #ffffff;
  --surface-2:   #f5f0e8;
  --surface-3:   #ede8de;
  --border:      rgba(184,146,74,0.14);
  --border-h:    rgba(184,146,74,0.28);
  --text:        #1a1410;
  --text-dim:    rgba(26,20,16,0.52);
  --text-muted:  rgba(26,20,16,0.32);
  --header-bg:   rgba(253,250,245,0.94);
  --header-glass: rgba(253,250,245,0.65);
}

/* Toggle button */
#theme-toggle {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 17px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
  transition:
    opacity     0.15s var(--ease-out),
    background  0.15s var(--ease-out),
    transform   160ms var(--ease-out);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  #theme-toggle:hover {
    opacity: 1;
    background: var(--surface-2);
  }
}

#theme-toggle:active {
  transform: scale(0.97);
}

/* ── Taalwisselaar dropdown ── */
.lang-dropdown-wrap {
  position: relative;
}

#lang-toggle {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
  color: var(--text);
  transition:
    opacity     0.15s var(--ease-out),
    background  0.15s var(--ease-out),
    transform   160ms var(--ease-out);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  #lang-toggle:hover {
    opacity: 1;
    background: var(--surface-2);
  }
}

#lang-toggle:active {
  transform: scale(0.97);
}

.lang-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  min-width: 148px;
  transform-origin: top right;
  transform: scale(0.95) translateY(-4px);
  opacity: 0;
  transition:
    transform 180ms var(--ease-out),
    opacity   180ms var(--ease-out);
  pointer-events: none;
}

.lang-dropdown-panel:not([hidden]) {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.lang-dropdown-panel[hidden] {
  display: flex; /* keep flex so animation works; hidden via opacity+pointer-events */
  visibility: hidden;
}

.lang-btn {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 7px 10px;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity    0.15s var(--ease-out),
    background 0.15s var(--ease-out),
    transform  160ms var(--ease-out);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .lang-btn:hover { opacity: 1; background: var(--surface-2); }
}
.lang-btn:active   { transform: scale(0.97); }
.lang-btn.active   { opacity: 1; background: var(--accent-dim); }

.lang-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  font-family: inherit;
  min-width: 22px;
}

.lang-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  font-family: inherit;
}

/* ── Licht thema: form inputs ── */
html[data-theme="light"] input,
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=email],
html[data-theme="light"] input[type=tel],
html[data-theme="light"] input[type=number],
html[data-theme="light"] input[type=password],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: rgba(26,20,16,0.05) !important;
  border-color: rgba(26,20,16,0.16) !important;
  color: var(--text) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(26,20,16,0.35) !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: rgba(184,146,74,0.55) !important;
  box-shadow: 0 0 0 3px rgba(184,146,74,0.10) !important;
}

/* ── Terracotta aliassen (verwijzen naar --orange; migreer naar --orange bij refactor) ── */
:root {
  --terracotta:     var(--orange);
  --terracotta-dim: var(--orange-dim);
  --terracotta-bdr: var(--orange-border);

  /* ── Emil Kowalski easing curves ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Standaard accent-tokens (brand = champagnegoud, voor index/login) ── */
:root {
  --accent:          #b8924a;
  --accent-dim:      rgba(184,146,74,0.06);
  --accent-soft:     rgba(184,146,74,0.12);
  --accent-border:   rgba(184,146,74,0.20);
  --accent-border-h: rgba(184,146,74,0.35);
  --accent-glow:     rgba(184,146,74,0.08);

  /* ── Portal kleur-tokens (gebruikt door index.html portal cards) ── */
  --orange:          #b25828;
  --orange-dim:      rgba(178,88,40,0.10);
  --orange-border:   rgba(178,88,40,0.20);
  --green:           #506e41;
  --green-dim:       rgba(80,110,65,0.10);
  --green-border:    rgba(80,110,65,0.20);
  --blue:            #375582;
  --blue-dim:        rgba(55,85,130,0.10);
  --blue-border:     rgba(55,85,130,0.20);
  --purple:          #825a32;
  --purple-dim:      rgba(130,90,50,0.10);
  --red:             #c0392b;
  --red-dim:         rgba(192,57,43,0.10);
  --yellow:          #c8882a;
  --yellow-dim:      rgba(200,136,42,0.10);
  --radius:          8px;
  --radius-sm:       4px;
}

/* ── Portal kleur-identiteit via data-portal op <html> ── */
[data-portal="huurder"] {
  --accent:          #b25828;
  --accent-dim:      rgba(178,88,40,0.06);
  --accent-soft:     rgba(178,88,40,0.12);
  --accent-border:   rgba(178,88,40,0.20);
  --accent-border-h: rgba(178,88,40,0.35);
  --accent-glow:     rgba(178,88,40,0.08);
}

[data-portal="monteur"] {
  --accent:          #506e41;
  --accent-dim:      rgba(80,110,65,0.06);
  --accent-soft:     rgba(80,110,65,0.12);
  --accent-border:   rgba(80,110,65,0.20);
  --accent-border-h: rgba(80,110,65,0.35);
  --accent-glow:     rgba(80,110,65,0.08);
}

[data-portal="huiseigenaar"] {
  --accent:          #375582;
  --accent-dim:      rgba(55,85,130,0.06);
  --accent-soft:     rgba(55,85,130,0.12);
  --accent-border:   rgba(55,85,130,0.20);
  --accent-border-h: rgba(55,85,130,0.35);
  --accent-glow:     rgba(55,85,130,0.08);
}

[data-portal="developer"] {
  --accent:          #825a32;
  --accent-dim:      rgba(130,90,50,0.06);
  --accent-soft:     rgba(130,90,50,0.12);
  --accent-border:   rgba(130,90,50,0.20);
  --accent-border-h: rgba(130,90,50,0.35);
  --accent-glow:     rgba(130,90,50,0.08);
}

/* ── Semantische status-tokens ── */
:root {
  --kritiek:           #c0392b;
  --kritiek-dim:       rgba(192,57,43,0.06);
  --kritiek-soft:      rgba(192,57,43,0.12);
  --kritiek-border:    rgba(192,57,43,0.20);
  --kritiek-border-h:  rgba(192,57,43,0.35);
  --kritiek-glow:      rgba(192,57,43,0.08);

  --urgent:            #c8882a;
  --urgent-dim:        rgba(200,136,42,0.06);
  --urgent-soft:       rgba(200,136,42,0.12);
  --urgent-border:     rgba(200,136,42,0.20);
  --urgent-border-h:   rgba(200,136,42,0.35);
  --urgent-glow:       rgba(200,136,42,0.08);

  --normaal:           #4a6ea8;
  --normaal-dim:       rgba(74,110,168,0.06);
  --normaal-soft:      rgba(74,110,168,0.12);
  --normaal-border:    rgba(74,110,168,0.20);
  --normaal-border-h:  rgba(74,110,168,0.35);
  --normaal-glow:      rgba(74,110,168,0.08);

  --cosmetisch:        #8a8278;
  --cosmetisch-dim:    rgba(138,130,120,0.06);
  --cosmetisch-soft:   rgba(138,130,120,0.12);
  --cosmetisch-border: rgba(138,130,120,0.20);
  --cosmetisch-border-h: rgba(138,130,120,0.35);
  --cosmetisch-glow:   rgba(138,130,120,0.08);

  --success:           #4a7a3a;
  --success-dim:       rgba(74,122,58,0.06);
  --success-soft:      rgba(74,122,58,0.12);
  --success-border:    rgba(74,122,58,0.20);
  --success-border-h:  rgba(74,122,58,0.35);
  --success-glow:      rgba(74,122,58,0.08);

  --ai:                #7a5a9a;
  --ai-dim:            rgba(122,90,154,0.06);
  --ai-soft:           rgba(122,90,154,0.12);
  --ai-border:         rgba(122,90,154,0.20);
  --ai-border-h:       rgba(122,90,154,0.35);
  --ai-glow:           rgba(122,90,154,0.08);

  /* Lichte varianten voor gebruik op donkere achtergronden (bijv. CIN-panels) */
  --orange-light:      #c8784a;
  --green-light:       #6a9a5a;
  --blue-light:        #6888b8;
}

/* Smooth kleurovergang alleen tijdens theme-toggle (performance: voorkomt global recalc) */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.2s var(--ease-out),
    color            0.2s var(--ease-out),
    border-color     0.2s var(--ease-out);
}

/* ── Reduced motion — beweging uit, opacity-transities behouden ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}