: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);
}

/* ────────────────────────────────────────────────────────────────────
   THE BRIDGE — every legacy variable name any page uses, derived from
   the 12 CGP tokens. This is the single place the whole site's look is
   decided; pages define NO palette of their own. Every derivation uses
   color-mix on a token, never a literal color, so restyling the CGP
   restyles every page — including the decorative hues, which collapse
   onto the theme's own accents ON PURPOSE: a cyan chip on a warm gold
   theme is exactly the off-brand splash this bridge exists to remove.
   Pages keep only STRUCTURAL vars (spacing, opacity, z-index).
   ──────────────────────────────────────────────────────────────────── */
html[data-cgp-vars="true"] {
  /* surfaces */
  --bg: var(--cgp-bg);
  --bg-2: var(--cgp-surface-2);
  --bg-base: var(--cgp-bg);
  --bg-elev: var(--cgp-surface);
  --bg-soft: var(--cgp-surface-2);
  --bg-tint-1: color-mix(in srgb, var(--cgp-gold) 14%, var(--cgp-bg));
  --bg-tint-2: color-mix(in srgb, var(--cgp-accent-2) 10%, var(--cgp-bg));
  --bg-input: color-mix(in srgb, var(--cgp-surface) 92%, var(--cgp-bg));
  --bg-log: color-mix(in srgb, var(--cgp-surface-2) 88%, var(--cgp-ink));
  --card: var(--cgp-surface);
  --panel: color-mix(in srgb, var(--cgp-surface) 78%, transparent);
  --panel-2: color-mix(in srgb, var(--cgp-surface-2) 82%, transparent);
  --panel-soft: color-mix(in srgb, var(--cgp-surface) 62%, transparent);
  --panel-strong: color-mix(in srgb, var(--cgp-surface) 94%, transparent);
  --panel-glass-bg: color-mix(in srgb, var(--cgp-surface) 66%, transparent);
  --strong: color-mix(in srgb, var(--cgp-surface) 94%, transparent);
  --soft: color-mix(in srgb, var(--cgp-surface-2) 70%, transparent);
  --frost: color-mix(in srgb, var(--cgp-surface) 55%, transparent);
  --modal-bg: var(--cgp-surface);
  --modal-card: var(--cgp-surface-2);
  --modal-backdrop: color-mix(in srgb, var(--cgp-ink) 55%, transparent);
  --input-bg: color-mix(in srgb, var(--cgp-surface) 92%, var(--cgp-bg));
  --background: var(--cgp-bg);

  /* ink */
  --ink: var(--cgp-ink);
  --ink-2: var(--cgp-muted);
  --ink-3: var(--cgp-faint);
  --ink-soft: var(--cgp-muted);
  --ink-muted: var(--cgp-muted);
  --muted: var(--cgp-muted);
  --faint: var(--cgp-faint);
  --text: var(--cgp-ink);
  --text-muted: var(--cgp-muted);
  --text-faint: var(--cgp-faint);
  --foreground: var(--cgp-ink);
  --card-foreground: var(--cgp-ink);
  --muted-foreground: var(--cgp-muted);
  --button-ink: var(--cgp-bg);

  /* lines */
  --line: var(--cgp-line);
  --line-2: color-mix(in srgb, var(--cgp-line) 55%, transparent);
  --line-soft: color-mix(in srgb, var(--cgp-line) 45%, transparent);
  --border: var(--cgp-line);
  --border-strong: color-mix(in srgb, var(--cgp-line) 70%, var(--cgp-ink));
  --panel-bd: color-mix(in srgb, var(--cgp-line) 80%, transparent);
  --row-divider: color-mix(in srgb, var(--cgp-line) 55%, transparent);
  --input: var(--cgp-line);
  --ring: color-mix(in srgb, var(--cgp-accent) 55%, transparent);

  /* accents */
  --accent: var(--cgp-accent);
  --accent-2: var(--cgp-accent-2);
  --accent-soft: color-mix(in srgb, var(--cgp-accent) 18%, transparent);
  --accent-bg: color-mix(in srgb, var(--cgp-accent) 14%, var(--cgp-surface));
  --accent-hover: color-mix(in srgb, var(--cgp-accent) 84%, var(--cgp-ink));
  --accent-glow: color-mix(in srgb, var(--cgp-accent) 38%, transparent);
  --gold: var(--cgp-gold);
  --gold-2: color-mix(in srgb, var(--cgp-gold) 78%, var(--cgp-surface));
  --gold-warm: var(--cgp-gold);
  --halo: color-mix(in srgb, var(--cgp-gold) 26%, transparent);
  --halo-2: color-mix(in srgb, var(--cgp-accent-2) 20%, transparent);
  --primary: var(--cgp-accent);
  --primary-foreground: var(--cgp-bg);
  --secondary: var(--cgp-surface-2);
  --secondary-foreground: var(--cgp-ink);
  --link: var(--cgp-accent);
  --btn-secondary-bg: color-mix(in srgb, var(--cgp-surface-2) 85%, var(--cgp-line));
  --btn-secondary-hover: color-mix(in srgb, var(--cgp-surface-2) 65%, var(--cgp-line));

  /* status — ok / warn / err / info, plus their bg/border/text triads */
  --ok: var(--cgp-success);
  --ok-ink: var(--cgp-success);
  --ok-bg: color-mix(in srgb, var(--cgp-success) 14%, var(--cgp-surface));
  --ok-border: color-mix(in srgb, var(--cgp-success) 40%, transparent);
  --ok-text: color-mix(in srgb, var(--cgp-success) 80%, var(--cgp-ink));
  --green: var(--cgp-success);
  --green-500: var(--cgp-success);
  --green-600: color-mix(in srgb, var(--cgp-success) 82%, var(--cgp-ink));
  --err: var(--cgp-danger);
  --err-ink: var(--cgp-danger);
  --err-bg: color-mix(in srgb, var(--cgp-danger) 14%, var(--cgp-surface));
  --err-border: color-mix(in srgb, var(--cgp-danger) 40%, transparent);
  --err-text: color-mix(in srgb, var(--cgp-danger) 80%, var(--cgp-ink));
  --red: var(--cgp-danger);
  --red-500: var(--cgp-danger);
  --red-600: color-mix(in srgb, var(--cgp-danger) 82%, var(--cgp-ink));
  --destructive: var(--cgp-danger);
  --destructive-foreground: var(--cgp-bg);
  --warn: var(--cgp-accent-2);
  --warn-bg: color-mix(in srgb, var(--cgp-accent-2) 14%, var(--cgp-surface));
  --warn-border: color-mix(in srgb, var(--cgp-accent-2) 40%, transparent);
  --warn-text: color-mix(in srgb, var(--cgp-accent-2) 80%, var(--cgp-ink));
  --info-bg: color-mix(in srgb, var(--cgp-accent) 12%, var(--cgp-surface));
  --info-border: color-mix(in srgb, var(--cgp-accent) 38%, transparent);
  --info-text: color-mix(in srgb, var(--cgp-accent) 78%, var(--cgp-ink));
  --paid: var(--cgp-success);
  --recv: var(--cgp-accent);

  /* decorative hues — deliberately collapsed onto theme tokens */
  --orange: var(--cgp-accent-2);
  --amber: var(--cgp-gold);
  --yellow-600: color-mix(in srgb, var(--cgp-gold) 82%, var(--cgp-ink));
  --cyan: color-mix(in srgb, var(--cgp-accent) 72%, var(--cgp-success));
  --blue: color-mix(in srgb, var(--cgp-accent) 72%, var(--cgp-success));
  --violet: color-mix(in srgb, var(--cgp-accent) 60%, var(--cgp-danger));
  --rose: color-mix(in srgb, var(--cgp-accent-2) 70%, var(--cgp-danger));
  --pink: color-mix(in srgb, var(--cgp-accent-2) 70%, var(--cgp-danger));
  --love: var(--cgp-accent-2);

  /* fonts + shape + depth */
  --font-display: var(--cgp-font-display);
  --font-body: var(--cgp-font-body);
  --font-mono: var(--cgp-font-mono);
  --serif: var(--cgp-font-display);
  --sans: var(--cgp-font-body);
  --radius: var(--cgp-radius-card);
  --shadow: var(--cgp-shadow);
  --shadow-sm: 0 6px 18px color-mix(in srgb, var(--cgp-ink) 10%, transparent);
  --shadow-md: 0 14px 40px color-mix(in srgb, var(--cgp-ink) 14%, transparent);
  --shadow-lg: var(--cgp-shadow);
}

/* THE PAGE GROUND — one background for the whole site.
   Applied to every CGP page rather than offered as an opt-in class, because
   opt-in is exactly how the site drifted apart: seven pages loaded their own
   template stylesheet and looked like a different product. The selector is
   deliberately more specific than a page's own `body { background: … }`, so
   a page cannot quietly go its own way again. A page that genuinely needs a
   different ground sets data-cgp-ground="own" on <html> and says why. */
html[data-cgp-vars="true"]:not([data-cgp-ground="own"]) body {
  color: var(--cgp-ink);
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--cgp-gold) 22%, transparent), transparent 34%),
    linear-gradient(135deg, var(--cgp-bg), color-mix(in srgb, var(--cgp-bg) 82%, var(--cgp-gold) 18%));
  background-attachment: fixed;
}

.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;
}

/* THE ORNAMENT, in one place.
   VECTOR ornaments (any .svg) are painted with the theme accent through a
   mask, so the shape comes from the file and the COLOUR always comes from
   the current CGP — ask for a purple identity and the mandala turns purple
   without anyone editing the asset. Raster ornaments (the photographic
   daisy) keep their own colours on the background-image path.

   Pages that draw the ornament themselves (talk.html and apps.html use a
   ::before, which cannot take a class) consume these three properties
   verbatim, so the mode logic lives HERE and nowhere else. */
:root {
  --cgp-ornament-image: var(--cgp-flower-url);
  --cgp-ornament-tint: transparent;
  --cgp-ornament-mask: none;
}

html[data-cgp-ornament="vector"] {
  --cgp-ornament-image: none;
  --cgp-ornament-tint: var(--cgp-accent);
  --cgp-ornament-mask: var(--cgp-flower-url);
}

html[data-cgp-ornament="vector"] .cgp-daisy-bg {
  background-image: none;
  background-color: var(--cgp-ornament-tint);
  -webkit-mask: var(--cgp-ornament-mask) center / contain no-repeat;
  mask: var(--cgp-ornament-mask) center / contain no-repeat;
  opacity: 0.34;
  filter: none;
}

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));
}

html[data-theme="night"][data-cgp-ornament="vector"] .cgp-daisy-bg {
  opacity: 0.28;
  filter: none;
}

@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%; }
}