/*
 * Luma Log — materiaallaag.
 *
 * theme.json levert de tokens; dit bestand levert wat theme.json niet kan
 * uitdrukken: het veld met zijn lichtvlekken, backdrop-filter en de
 * datavisualisaties (energy, enjoyment, tags).
 *
 * Regel uit de brandbook: glas alleen op inhoud, nooit glas op glas.
 */

/* === Het veld ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(150deg, #F6F3FF 0%, #EFEAFD 60%, #F3EDFF 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Drie lichtvlekken, zodat de blur iets heeft om op te vangen. Ze staan
 * fixed en achter alles: het veld zelf is nooit glas.
 */
.luma-blooms {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.luma-blooms span {
  position: absolute;
  border-radius: 999px;
  display: block;
}

.luma-blooms .bloom-1 {
  top: -90px;
  right: -70px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--wp--custom--bloom--violet) 0%, rgba(183, 155, 246, 0) 70%);
  filter: blur(20px);
}

.luma-blooms .bloom-2 {
  top: 38%;
  left: -140px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--wp--custom--bloom--sky) 0%, rgba(159, 217, 232, 0) 70%);
  filter: blur(24px);
}

.luma-blooms .bloom-3 {
  bottom: -80px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--wp--custom--bloom--rose) 0%, rgba(242, 183, 216, 0) 70%);
  filter: blur(22px);
}

.wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* === Glas ================================================================ */

/*
 * Glas · standaard — log-cards, secties, lijstitems.
 * De rand hoort erbij: zonder de violette lijn verdwijnt het oppervlak.
 */
.is-style-glass {
  background-color: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(var(--wp--custom--blur--base));
  -webkit-backdrop-filter: blur(var(--wp--custom--blur--base));
  border: 1px solid var(--wp--preset--color--glass-line);
  border-radius: var(--wp--custom--radius--surface);
  box-shadow: var(--wp--preset--shadow--glass);
  padding: var(--wp--preset--spacing--70);
}

/* Glas · raised — insight-cards, alles wat naar voren moet. */
.is-style-glass-raised {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(var(--wp--custom--blur--raised));
  -webkit-backdrop-filter: blur(var(--wp--custom--blur--raised));
  border: 1px solid var(--wp--preset--color--glass-line);
  border-radius: var(--wp--custom--radius--card);
  box-shadow: var(--wp--preset--shadow--raised);
  padding: 24px 28px;
}

/* Quiet fill — segmented controls, rustige vlakken, tracks. Geen blur. */
.is-style-quiet {
  background-color: var(--wp--preset--color--glass-quiet);
  border-radius: var(--wp--custom--radius--surface);
  padding: var(--wp--preset--spacing--70);
}

/* Sheet — de onderste laag van een dialoog of een grote sectie. */
.is-style-sheet {
  background: linear-gradient(160deg, #FCFBFF 0%, #ECE5FE 100%);
  border: 1px solid var(--wp--preset--color--glass-line);
  border-radius: var(--wp--custom--radius--sheet);
  box-shadow: var(--wp--preset--shadow--lift);
  padding: var(--wp--preset--spacing--100);
}

/*
 * Glas op glas is verboden: als een genest blok toch een glasstijl krijgt,
 * halen we de tweede blur weg zodat het niet modderig wordt.
 */
.is-style-glass .is-style-glass,
.is-style-glass .is-style-glass-raised,
.is-style-glass-raised .is-style-glass,
.is-style-glass-raised .is-style-glass-raised {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Do / Dont — de kaartjes uit de brandbook. */
.is-style-do,
.is-style-dont {
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--wp--preset--color--glass-line);
  border-radius: var(--wp--custom--radius--card);
  padding: 24px 28px;
}

.is-style-do {
  border-left: 3px solid var(--wp--preset--color--up);
}

.is-style-dont {
  border-left: 3px solid var(--wp--preset--color--down);
}

.is-style-do :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wp--preset--color--up);
}

.is-style-dont :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wp--preset--color--down);
}

/* === Typografische signaturen ============================================ */

/*
 * Het uppercase 11px-label is een handtekening van de app: boven elke sectie,
 * en nergens anders voor.
 */
.is-style-label {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--wp--preset--color--muted);
  margin-bottom: var(--wp--preset--spacing--40);
}

/* Zelfde vorm, maar violet: de eyebrow boven een sectiekop. */
.is-style-eyebrow {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--wp--preset--color--violet-600);
  margin-bottom: var(--wp--preset--spacing--30);
}

/* De lead onder een kop. */
.is-style-lead {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--muted);
  max-width: 62ch;
}

/* De insight-zin — Outfit, alleen hier. */
.is-style-insight {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
}

/* === Tags · de acht categoriekleuren ===================================== */

/*
 * Gebruikers kiezen nooit een vrije kleur; dit zijn de acht combinaties uit
 * de app, allemaal gemeten op WCAG AA (laagste is rose, 4.51:1).
 */
.is-style-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--wp--custom--radius--chip);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
  background-color: #EBE6FE;
  color: #5B3FB0;
}

.luma-tag--violet { background-color: #EBE6FE; color: #5B3FB0; }
.luma-tag--rose   { background-color: #FCE7F0; color: #B4436A; }
.luma-tag--teal   { background-color: #E2F3F1; color: #2B766C; }
.luma-tag--amber  { background-color: #FBF0DC; color: #8A5A12; }
.luma-tag--sky    { background-color: #E4F0FA; color: #2C6491; }
.luma-tag--plum   { background-color: #F3E8FA; color: #6B3E96; }
.luma-tag--sage   { background-color: #EAF1E4; color: #4A6B33; }
.luma-tag--clay   { background-color: #FAEBE4; color: #9A4E2E; }

/* === Data =============================================================== */

/* Energy 1–5 · rose → teal. Het cijfer staat er altijd bij: kleur is nooit
   het enige signaal. */
.luma-scale {
  display: flex;
  gap: 8px;
  margin: var(--wp--preset--spacing--50) 0;
}

.luma-scale > span {
  flex: 1;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--wp--custom--energy--number);
}

.luma-scale--energy > span:nth-child(1) { background-color: var(--wp--custom--energy--1); }
.luma-scale--energy > span:nth-child(2) { background-color: var(--wp--custom--energy--2); }
.luma-scale--energy > span:nth-child(3) { background-color: var(--wp--custom--energy--3); }
.luma-scale--energy > span:nth-child(4) { background-color: var(--wp--custom--energy--4); }
.luma-scale--energy > span:nth-child(5) { background-color: var(--wp--custom--energy--5); }

.luma-scale--enjoyment > span { color: var(--wp--custom--enjoyment--number); }
.luma-scale--enjoyment > span:nth-child(1) { background-color: var(--wp--custom--enjoyment--1); }
.luma-scale--enjoyment > span:nth-child(2) { background-color: var(--wp--custom--enjoyment--2); }
.luma-scale--enjoyment > span:nth-child(3) { background-color: var(--wp--custom--enjoyment--3); }
.luma-scale--enjoyment > span:nth-child(4) { background-color: var(--wp--custom--enjoyment--4); color: #fff; }
.luma-scale--enjoyment > span:nth-child(5) { background-color: var(--wp--custom--enjoyment--5); color: #fff; }

/* Enjoyment in lijsten: dots, niet als vlak. */
.luma-dots {
  display: inline-flex;
  gap: 4px;
  vertical-align: -1px;
}

.luma-dots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: block;
  background-color: var(--wp--custom--enjoyment--2);
}

.luma-dots i.on {
  background-color: var(--wp--custom--enjoyment--5);
}

/* Energieverandering. Laag is nooit "fout": geen rood. */
.luma-delta {
  font-weight: 800;
  font-size: 12.5px;
}

.luma-delta--up   { color: var(--wp--preset--color--up); }
.luma-delta--down { color: var(--wp--preset--color--down); }
.luma-delta--flat { color: var(--wp--preset--color--muted); }

/* Log-card — de compacte variant van glas, met de tijd bovenaan. */
.luma-logcard {
  background-color: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--wp--preset--color--glass-line);
  border-radius: var(--wp--custom--radius--card);
  padding: 13px 15px;
  margin-bottom: 10px;
}

.luma-logcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  margin-bottom: 5px;
}

.luma-logcard__name {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  margin-bottom: 5px;
}

/* === Knoppen ============================================================= */

/* De primaire knop houdt zijn violette gloed — de enige gekleurde schaduw. */
.wp-block-button__link {
  transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--curve),
              box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--curve),
              transform var(--wp--custom--motion--fast) var(--wp--custom--motion--curve);
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* Secondary — glas met een violette letter, geen gloed. */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--wp--preset--color--violet-700);
  border: 1px solid var(--wp--preset--color--glass-line);
  box-shadow: none;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: #FFFFFF;
  color: var(--wp--preset--color--violet-800);
}

/* Quiet — "Maybe later". */
.wp-block-button.is-style-quiet .wp-block-button__link {
  background-color: var(--wp--preset--color--glass-quiet);
  color: var(--wp--preset--color--violet-800);
  box-shadow: none;
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover {
  background-color: rgba(124, 96, 214, 0.14);
  color: var(--wp--preset--color--violet-800);
}

/* === Chrome ============================================================== */

/*
 * Blur alleen op wat vast staat. De header is de enige plek op de site waar
 * chrome-blur (30px) staat.
 */
.luma-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(var(--wp--custom--blur--chrome));
  -webkit-backdrop-filter: blur(var(--wp--custom--blur--chrome));
  border-bottom: 1px solid var(--wp--preset--color--glass-line);
}

.luma-header .wp-block-button__link {
  padding: 11px 20px;
  font-size: 13.5px;
}

.luma-footer {
  border-top: 1px solid var(--wp--preset--color--glass-line);
}

/* Het lockup in de header: logo + wordmark. */
.luma-wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.luma-wordmark em {
  font-style: normal;
  color: var(--wp--preset--color--violet-600);
}

/* === Detail ============================================================== */

.wp-block-table :is(th, td) {
  border-bottom: 1px solid var(--wp--preset--color--glass-line);
  padding: 9px 10px;
  text-align: left;
}

.wp-block-table th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.wp-block-table table {
  border-collapse: collapse;
}

.wp-block-separator:not(.is-style-dots) {
  border: none;
  border-top: 1px solid var(--wp--preset--color--glass-line);
  opacity: 1;
}

:where(.wp-block-image) img {
  border-radius: var(--wp--custom--radius--card);
}

:is(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--violet-600);
  outline-offset: 2px;
}

::selection {
  background-color: var(--wp--preset--color--violet-200);
  color: var(--wp--preset--color--ink);
}

/* Formulieren (zoeken, reacties) volgen het glas. */
:is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea) {
  font-family: var(--wp--preset--font-family--ui);
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--wp--preset--color--glass-line);
  border-radius: var(--wp--custom--radius--card);
  padding: 12px 14px;
}

.wp-block-search__button,
.wp-block-post-comments-form .submit {
  border-radius: var(--wp--custom--radius--chip);
  background-color: var(--wp--preset--color--violet-600);
  color: #FFFFFF;
  border: none;
  padding: 12px 22px;
  font-family: var(--wp--preset--font-family--ui);
  font-weight: 700;
  box-shadow: var(--wp--preset--shadow--glow);
}

/* Motion: 200–260ms easeOutCubic. Wie minder beweging wil, krijgt geen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .wp-block-button__link:hover { transform: none; }
}

/* Blur is duur op zwakke hardware; het veld is licht genoeg om zonder te
   kunnen. Zelfde afspraak als in de app. */
@media (max-width: 640px) {
  .is-style-glass,
  .is-style-glass-raised {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .is-style-glass { background-color: rgba(255, 255, 255, 0.78); }
  .is-style-sheet { padding: var(--wp--preset--spacing--80); }
  .is-style-glass-raised,
  .is-style-do,
  .is-style-dont { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
}