/* Ontwerp 2 — Modern Premium
 *
 * Bijna zwart, haarlijnen, één blauw accent. Er wordt niets versierd: het enige dat
 * onderscheid maakt is grootte, gewicht en witruimte. Randen zijn strak, rondingen klein,
 * beweging kort en precies.
 *
 * De regel voor dit ontwerp: als iets weggelaten kan worden, wordt het weggelaten.
 */

/* De zijpadding staat één keer, in --main-pad-x: de wereldkaart (leerpad.css) vloeit precies
   zo ver uit als deze padding, en leest daarvoor deze variabele. */
:root[data-design="premium"] .main { --main-pad-x: var(--space-6); padding: var(--space-6) var(--main-pad-x) var(--space-8); max-width: 1180px; }
:root[data-design="premium"] .sidebar { padding: var(--space-5) var(--space-4); background: var(--sidebar); }
:root[data-design="premium"] .brand small { display: none; }

:root[data-design="premium"] .nav button {
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  min-height: 34px;
  letter-spacing: -.005em;
}
:root[data-design="premium"] .nav button.active { background: var(--elev); }
:root[data-design="premium"] .nav .icon { width: 15px; height: 15px; stroke-width: 1.6; }

/* Typografie draagt het hele scherm. Groot verschil tussen titel en tekst, en een
   kleinere, rustigere bovenregel. */
:root[data-design="premium"] h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; }
:root[data-design="premium"] .kicker { font-size: 11px; color: var(--muted-2); letter-spacing: 0; }
:root[data-design="premium"] .section-label { letter-spacing: .06em; font-weight: 550; font-size: 10.5px; }
:root[data-design="premium"] .lesson-card h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; }
:root[data-design="premium"] .lesson-description,
:root[data-design="premium"] .stage-intro { font-size: 14px; line-height: 1.62; }

/* Geen kaarten met vullingen: alleen lijnen. Dat is het hele idee van dit ontwerp. */
:root[data-design="premium"] .lesson-card { padding: var(--space-5) 0; }
:root[data-design="premium"] .overview-group { padding-bottom: var(--space-4); }
:root[data-design="premium"] .flashcard,
:root[data-design="premium"] .pattern-card,
:root[data-design="premium"] .listening-item,
:root[data-design="premium"] .review-word-card,
:root[data-design="premium"] .summary-focus-card,
:root[data-design="premium"] .personal-summary-box,
:root[data-design="premium"] .summary-pattern,
:root[data-design="premium"] .storage-card,
:root[data-design="premium"] .chat-window {
  background: var(--surface-soft);
  border-radius: var(--radius-s);
  box-shadow: none;
}
:root[data-design="premium"] .primary-button,
:root[data-design="premium"] .secondary-button {
  border-radius: var(--radius-xs);
  min-height: 40px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 var(--space-4);
}
:root[data-design="premium"] .primary-button:hover { box-shadow: none; background: var(--accent-strong); }
:root[data-design="premium"] .choice { border-radius: var(--radius-xs); min-height: 48px; }
:root[data-design="premium"] .choice:hover { background: var(--elev); border-color: var(--line-strong); }

:root[data-design="premium"] .lesson-main { padding: var(--space-6) var(--space-7) var(--space-8); }
:root[data-design="premium"] .stage-title { font-size: clamp(30px, 4.6vw, 46px); font-weight: 600; }
:root[data-design="premium"] .step-item { border-radius: var(--radius-xs); font-size: 11.5px; }
:root[data-design="premium"] .step-number { width: 22px; height: 22px; font-size: 9.5px; }

/* De kaart is de enige plek waar kleur binnenkomt, en die kleur is van de wereld zelf —
   zie het palet per wereld in worlds.js. De behandeling blijft premium: gedempt, met
   verhoudingen in plaats van effecten. Wat hier níét gebeurt is de lagen platslaan tot
   omtrekken; dan zou Tokio er weer uitzien als Madrid. */
:root[data-design="premium"] .world { border-radius: var(--radius-m); box-shadow: none; }
:root[data-design="premium"] .world-title { font-weight: 600; }
:root[data-design="premium"] .world-sun { opacity: .07; }
:root[data-design="premium"] .world-star { opacity: .16; }
:root[data-design="premium"] .world-band-far { opacity: .72; }
:root[data-design="premium"] .world-band-mid { opacity: .84; }
:root[data-design="premium"] .world-route-base { stroke: var(--world-route); opacity: .28; }
:root[data-design="premium"] .world-route-done { stroke-width: 2.5; }
:root[data-design="premium"] .world-prop path,
:root[data-design="premium"] .world-prop circle { opacity: .13; }
/* Kleinere punten: in dit ontwerp is de route belangrijker dan de haltes. `r` is een
   echte CSS-eigenschap voor SVG-vormen, dus de ring moet mee anders staat hij scheef. */
:root[data-design="premium"] .world-node-disc { r: 14; stroke-width: 1.5; }
:root[data-design="premium"] .world-node-halo { r: 14; stroke-width: 1.2; }
:root[data-design="premium"] .world-node-label { font-size: 13px; font-weight: 550; }
:root[data-design="premium"] .world-landmark-shape path,
:root[data-design="premium"] .world-landmark-shape circle { opacity: .16; stroke-width: 1.1; }
:root[data-design="premium"] .world-landmark-label { fill: var(--muted-2); font-size: 11px; font-weight: 550; }

/* Beweging: kort en exact. Niets zwaait na. */
:root[data-design="premium"] {
  --dur-2: .18s;
  --dur-3: .3s;
  --dur-4: .5s;
  --ease-spring: cubic-bezier(.2, .8, .3, 1);
}
:root[data-design="premium"] .primary-button:hover,
:root[data-design="premium"] .secondary-button:hover { transform: none; }