/* ============================================================
   aiworkshop.nl — shared site styles
   Two switchable palettes: "Playful School" (default) + "Happy Soft"
   Both are light themes → text always uses dark --ink.
   IMPORTANT: no CSS transition on any theme-driven background/color
   property — theme changes must snap instantly.
   ============================================================ */

:root, [data-theme="school"] {
  --bg:#FCF7EE;
  --ink:#2A384E;
  --ink-soft:rgba(42,56,78,.72);
  --surface:#FFFFFF;
  --line:rgba(42,56,78,.12);
  --c1:#F2867A;            /* primary  (vrolijk koraal) */
  --c2:#46C2CE;            /* secondary(fris teal)      */
  --c3:#FBCB63;            /* soft     (zonnig geel)    */
  --accent-dot:#F29A46;
  --btn-ink:#2A384E;
  --deep:#2A384E;          /* footer / dark band */
  --on-deep:#FCF7EE;
  --box1:#FFDA7A;
  --box2:#F5A38C;
  --blob1:#46C2CE; --blob2:#F2867A; --blob3:#FBCB63; --blob4:#7FD1C7;
  --blob-op:.5;
  /* liquid glass */
  --glass-bg:rgba(255,255,255,.24);
  --glass-border:rgba(255,255,255,.6);
  --glass-hi:rgba(255,255,255,.85);
  --glass-caustic:rgba(255,255,255,.4);
  --refl-start:rgba(255,255,255,.6);
  --refl-end:rgba(255,255,255,0);
  --glare:rgba(255,255,255,.6);
  --pill-bg:rgba(255,255,255,.92);
  --pill-shadow:0 4px 14px rgba(42,56,78,.14),inset 0 1px 1px rgba(255,255,255,.9);
  --icon:rgba(42,56,78,.6);
  --icon-active:#2A384E;
  --divider:rgba(42,56,78,.15);
}

[data-theme="happy"] {
  --bg:#FFFEEA;
  --ink:#3A4A5C;
  --ink-soft:rgba(58,74,92,.72);
  --surface:#FFFFFF;
  --line:rgba(58,74,92,.12);
  --c1:#FFA763;            /* primary  (orange)     */
  --c2:#BDEDFF;            /* secondary(light blue) */
  --c3:#FFE19C;            /* soft     (yellow)     */
  --accent-dot:#FFA763;
  --btn-ink:#3A4A5C;
  --deep:#3E5C6E;
  --on-deep:#FFFEEA;
  --box1:#FFD9A8;
  --box2:#FFE19C;
  --blob1:#FFA763; --blob2:#BDEDFF; --blob3:#FFE19C; --blob4:#D6FAFF;
  --blob-op:.5;
  --glass-bg:rgba(255,255,255,.3);
  --glass-border:rgba(255,255,255,.72);
  --glass-hi:rgba(255,255,255,.9);
  --glass-caustic:rgba(255,255,255,.45);
  --refl-start:rgba(255,255,255,.66);
  --refl-end:rgba(255,255,255,0);
  --glare:rgba(255,255,255,.6);
  --pill-bg:rgba(255,255,255,.95);
  --pill-shadow:0 4px 14px rgba(58,74,92,.14),inset 0 1px 1px rgba(255,255,255,.9);
  --icon:rgba(58,74,92,.6);
  --icon-active:#3A4A5C;
  --divider:rgba(58,74,92,.15);
}

[data-theme="bold"] {
  --bg:#F5EFE0;
  --ink:#3A3128;
  --ink-soft:rgba(58,49,40,.72);
  --surface:#FFFFFF;
  --line:rgba(58,49,40,.13);
  --c1:#E74C3B;            /* primary  (rood)   */
  --c2:#23B99A;            /* secondary(teal)   */
  --c3:#F0C418;            /* soft     (geel)   */
  --accent-dot:#E67E25;
  --btn-ink:#2A231C;
  --deep:#1C7D68;
  --on-deep:#F5EFE0;
  --box1:#F0C418;
  --box2:#E67E25;
  --blob1:#F0C418; --blob2:#E74C3B; --blob3:#23B99A; --blob4:#E67E25;
  --blob-op:.36;
  --glass-bg:rgba(255,255,255,.26);
  --glass-border:rgba(255,255,255,.62);
  --glass-hi:rgba(255,255,255,.85);
  --glass-caustic:rgba(255,255,255,.4);
  --refl-start:rgba(255,255,255,.6);
  --refl-end:rgba(255,255,255,0);
  --glare:rgba(255,255,255,.6);
  --pill-bg:rgba(255,255,255,.92);
  --pill-shadow:0 4px 14px rgba(58,49,40,.14),inset 0 1px 1px rgba(255,255,255,.9);
  --icon:rgba(58,49,40,.6);
  --icon-active:#3A3128;
  --divider:rgba(58,49,40,.15);
}

html { scroll-behavior:smooth; scroll-padding-top:160px; }
body { margin:0; background-color:var(--bg); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }

.aiw-page { background-color:var(--bg); }

@keyframes aiwFloat {
  0%   { transform:translate(0,0) scale(1) rotate(0deg); }
  50%  { transform:translate(4%,-7%) scale(1.08) rotate(6deg); }
  100% { transform:translate(-3%,5%) scale(.95) rotate(-4deg); }
}
@keyframes aiwBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* shared hover helpers (transform/opacity only — safe to transition) */
.aiw-cta  { transition:transform .3s cubic-bezier(.34,1.2,.64,1), box-shadow .3s ease; }
.aiw-cta:hover  { transform:translateY(-3px); }
.aiw-path { transition:transform .4s cubic-bezier(.34,1.2,.64,1), box-shadow .4s ease; }
.aiw-path:hover { transform:translateY(-6px); }
.aiw-path:hover .aiw-arrow { transform:translateX(6px); }
.aiw-arrow { transition:transform .3s ease; display:inline-block; }
.aiw-link { transition:opacity .2s ease, transform .2s ease; }
.aiw-link:hover { opacity:1 !important; transform:translateX(2px); }
.aiw-swatch { transition:transform .25s cubic-bezier(.34,1.2,.64,1), box-shadow .25s ease; }
.aiw-swatch:hover { transform:scale(1.08); }

.aiw-section-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  border:1px solid color-mix(in srgb, var(--line) 72%, rgba(255,255,255,.55));
  background:color-mix(in srgb, var(--surface) 82%, rgba(255,255,255,.5));
  box-shadow:0 10px 24px -18px rgba(42,56,78,.28), inset 0 1px 0 rgba(255,255,255,.75);
}

.aiw-section-kicker::before {
  content:'';
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
  flex:0 0 auto;
}

.aiw-section-kicker--c1 { color:var(--c1); }
.aiw-section-kicker--c2 { color:var(--c2); }

.aiw-form,
.aiw-contact-grid,
.aiw-contact-card,
.aiw-contact-side,
.aiw-contact-note,
.aiw-contact-row,
.aiw-role-row,
.aiw-download-grid {
  min-width:0;
}

.aiw-form input,
.aiw-form select,
.aiw-form textarea,
.aiw-form button,
.aiw-contact-note,
.aiw-contact-card {
  max-width:100%;
}

.aiw-form input,
.aiw-form select,
.aiw-form textarea {
  width:100%;
  min-width:0;
}

.aiw-contact-note .aiw-link {
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width: 860px) {
  .aiw-download-grid,
  .aiw-contact-grid {
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .aiw-contact-card,
  .aiw-contact-note,
  .aiw-download-grid {
    border-radius:22px !important;
  }

  .aiw-contact-section {
    padding-bottom:8px !important;
  }
}

@media (max-width: 640px) {
  .aiw-section-kicker {
    font-size:11.5px;
    letter-spacing:.12em;
    padding:7px 12px;
  }

  .aiw-contact-card,
  .aiw-contact-note,
  .aiw-download-grid {
    padding:20px !important;
  }

  .aiw-contact-row,
  .aiw-role-row {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .aiw-role-row > button,
  .aiw-form > button {
    width:100%;
  }
}