:root,
html[data-theme="day"] {
  --cgp-bg: #f4ead0;
  --cgp-surface: #fff9ea;
  --cgp-surface-2: #f8edcf;
  --cgp-ink: #251d12;
  --cgp-muted: #746b5d;
  --cgp-faint: #9a907f;
  --cgp-line: #dfd0a8;
  --cgp-accent: #bd8a3c;
  --cgp-accent-2: #d87843;
  --cgp-gold: #c69a47;
  --cgp-success: #2f6f42;
  --cgp-danger: #b6533f;
  --cgp-font-display: Fraunces, Georgia, serif;
  --cgp-font-body: Inter, system-ui, sans-serif;
  --cgp-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --cgp-radius-card: 28px;
  --cgp-radius-button: 999px;
  --cgp-radius-field: 18px;
  --cgp-shadow: 0 28px 80px rgba(86, 64, 22, 0.18);
  --cgp-flower-url: url("/marjetica.png?v=2");
}

html[data-theme="night"] {
  --cgp-bg: #0d1018;
  --cgp-surface: #141a25;
  --cgp-surface-2: #1d2431;
  --cgp-ink: #fff7e8;
  --cgp-muted: #cbbf9f;
  --cgp-faint: #8c826d;
  --cgp-line: #4a3c25;
  --cgp-accent: #efc76a;
  --cgp-accent-2: #e48a54;
  --cgp-gold: #efc76a;
  --cgp-success: #8fd08d;
  --cgp-danger: #ff9a86;
  --cgp-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

html[data-cgp-vars="true"] {
  --bg: var(--cgp-bg);
  --bg-elev: var(--cgp-surface);
  --bg-soft: var(--cgp-surface-2);
  --panel: color-mix(in srgb, var(--cgp-surface) 78%, transparent);
  --strong: color-mix(in srgb, var(--cgp-surface) 94%, transparent);
  --ink: var(--cgp-ink);
  --ink-2: var(--cgp-muted);
  --ink-3: var(--cgp-faint);
  --muted: var(--cgp-muted);
  --faint: var(--cgp-faint);
  --line: var(--cgp-line);
  --accent: var(--cgp-accent);
  --accent-soft: var(--cgp-gold);
  --gold: var(--cgp-gold);
  --gold-warm: var(--cgp-gold);
  --orange: var(--cgp-accent-2);
  --green: var(--cgp-success);
  --red: var(--cgp-danger);
}

.cgp-page {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--cgp-ink);
  font-family: var(--cgp-font-body);
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--cgp-gold) 24%, transparent), transparent 34%),
    linear-gradient(135deg, var(--cgp-bg), color-mix(in srgb, var(--cgp-bg) 80%, var(--cgp-gold) 20%));
}

.cgp-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.cgp-card {
  background: color-mix(in srgb, var(--cgp-surface) 82%, transparent);
  border: 1px solid var(--cgp-line);
  border-radius: var(--cgp-radius-card);
  box-shadow: var(--cgp-shadow);
  backdrop-filter: blur(18px);
}

.cgp-button {
  border: 0;
  border-radius: var(--cgp-radius-button);
  background: linear-gradient(110deg, var(--cgp-accent-2), var(--cgp-gold));
  color: #1f1408;
  font-weight: 900;
  cursor: pointer;
}

.cgp-field {
  border: 1px solid var(--cgp-line);
  border-radius: var(--cgp-radius-field);
  background: color-mix(in srgb, var(--cgp-surface) 78%, transparent);
  color: var(--cgp-ink);
}

.cgp-title {
  font-family: var(--cgp-font-display);
  letter-spacing: 0;
}

.cgp-mono {
  font-family: var(--cgp-font-mono);
}

.cgp-daisy-bg {
  position: fixed;
  left: -90px;
  top: calc(50% - 190px);
  z-index: -1;
  width: min(390px, 50vw);
  aspect-ratio: 1;
  pointer-events: none;
  background-image: var(--cgp-flower-url);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.78;
  filter: drop-shadow(0 28px 55px rgba(92, 65, 18, 0.18));
  animation: cgpFlower 12s ease-in-out infinite alternate;
}

html[data-theme="night"] .cgp-daisy-bg {
  opacity: 0.46;
  filter: brightness(0.8) drop-shadow(0 28px 70px rgba(0, 0, 0, 0.55));
}

@keyframes cgpFlower {
  from { transform: translate3d(-4px, 10px, 0) rotate(-3deg) scale(0.98); }
  to { transform: translate3d(12px, -8px, 0) rotate(4deg) scale(1.03); }
}

html[data-cgp-reduced-motion="true"] .cgp-daisy-bg {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .cgp-daisy-bg { animation: none; }
}

@media (max-width: 720px) {
  .cgp-shell { width: min(100% - 22px, 680px); }
  .cgp-card { border-radius: min(var(--cgp-radius-card), 22px); }
  .cgp-daisy-bg { width: 300px; left: -125px; top: 40%; }
}