/* GlowHobak — shared tokens and the few styles Tailwind utilities can't express.
   Layout, spacing, colour and type live as Tailwind classes in the markup
   (theme + shared components in tailwind.config.js). This file holds:
   1) tokens: dark "night" theme over Organic, lantern lights, 3D scene colours, card fonts
   2) Organic components retuned for the dark ground
   3) decorative art built from pseudo-elements + keyframes */

/* ---------- 1. tokens ---------- */
:root {
  /* night theme: Organic's ramps stay, the semantic ground flips dark */
  --color-bg: #17141b;
  --color-surface: #221e27;
  --color-surface-2: #2d2833;
  --color-text: #f3ead8;
  --color-muted: var(--color-neutral-400);
  --color-faint: var(--color-neutral-500);
  --color-divider: color-mix(in srgb, #f3ead8 16%, transparent);
  --color-wash: color-mix(in oklch, var(--color-accent) 24%, var(--color-bg));
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 0 0 1px rgb(243 234 216 / 0.05), 0 4px 14px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 0 0 1px rgb(243 234 216 / 0.06), 0 16px 40px rgb(0 0 0 / 0.55);

  /* Korean pairs for the UI: Jua with Caprasimo, Gowun Dodum with Figtree */
  --font-heading: "Caprasimo", "Jua", system-ui, sans-serif;
  --font-body: "Figtree", "Gowun Dodum", system-ui, sans-serif;
  /* card fonts: Latin face first, Korean fallback second */
  --pc-font-spooky: Creepster, "East Sea Dokdo", cursive;
  --pc-font-title: "Freckle Face", "Yeon Sung", cursive;
  --pc-font-name: "Jolly Lodger", "Yeon Sung", cursive;
  --pc-font-desc: "East Sea Dokdo", cursive;

  /* lantern light presets (content colours, read by the 3D code too) */
  --light-candle: #ffd84d;
  --light-ember: #ff7433;
  --light-slime: #a8f05a;
  --light-ghost: #8ad4ff;
  --light-witch: #c08cff;
  --light-gum: #ff8cc6;
  --light: var(--light-candle); /* current light, set live from JS */

  /* 3D backdrops (read by the 3D code) */
  --scene-grave-sky: #151829;
  --scene-grave-fog: #0d0f19;
  --scene-grave-cloud: #3a3f5c;
  --scene-grave-ground: #2a2c33;
  --scene-grave-stone: #6e717c;
  --scene-grave-moon: #f4ecd0;
  --scene-patch-sky: #3e2340;
  --scene-patch-horizon: #c4643a;
  --scene-patch-fog: #5b2f39;
  --scene-patch-ground: #39432a;
  --scene-patch-hay: #d6b067;

  /* scene backgrounds (Tailwind: bg-night / bg-grave / bg-patch) */
  --pc-ink: color-mix(in oklch, var(--color-neutral-900) 32%, black);
  --pc-night:
    radial-gradient(ellipse 70% 45% at 50% 82%, color-mix(in oklch, var(--light) 14%, var(--pc-ink)), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 0%, color-mix(in oklch, var(--color-accent-2-900) 55%, var(--pc-ink)), var(--pc-ink) 75%);
  --pc-grave:
    radial-gradient(circle at 26% 22%, color-mix(in oklch, var(--scene-grave-moon) 22%, transparent), transparent 32%),
    linear-gradient(to bottom, var(--scene-grave-sky), var(--scene-grave-fog) 75%);
  --pc-patch: linear-gradient(to bottom, var(--scene-patch-sky) 0%, color-mix(in oklch, var(--scene-patch-sky) 50%, var(--scene-patch-horizon)) 38%, var(--scene-patch-horizon) 58%, var(--scene-patch-fog) 80%);
}

body { margin: 0; background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-accent-400); }
a:hover { color: var(--color-accent-300); }

/* ---------- 2. Organic components on the night ground ---------- */
.tag-accent { background: var(--color-wash); color: var(--color-accent-300); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-surface-2); color: var(--color-muted); }
.dialog-body { opacity: 1; color: var(--color-muted); }
.field > label { color: var(--color-muted); }
.btn-ghost { color: var(--color-accent-400); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; }
input[type="checkbox"], input[type="range"] { accent-color: var(--color-accent); }
* { scrollbar-color: var(--color-surface-2) transparent; }

/* ---------- 3. decorative art ---------- */
/* gallery placeholder lantern: the post's light colour arrives as --light */
.pc-lantern-art { position: relative; }
.pc-lantern-art::before {
  content: ""; position: absolute; left: 50%; top: 56%; width: 46%; aspect-ratio: 1.15; translate: -50% -50%;
  border-radius: 48% 48% 44% 44%;
  background: radial-gradient(circle at 50% 55%, var(--light), color-mix(in oklch, var(--light) 30%, var(--color-accent-700)) 45%, var(--color-accent-800) 75%);
  box-shadow: 0 0 40px color-mix(in oklch, var(--light) 55%, transparent);
}
.pc-lantern-art::after {
  content: ""; position: absolute; left: 50%; top: 56%; width: 70%; height: 22%; translate: -50% 120%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--light) 35%, transparent), transparent);
}
.pc-lantern-art[data-flicker="true"]::before { animation: pc-flicker 2.4s infinite; }
@keyframes pc-flicker { 0%, 100% { filter: brightness(1); } 18% { filter: brightness(.86); } 40% { filter: brightness(1.04); } 62% { filter: brightness(.55); } 66% { filter: brightness(.95); } 80% { filter: brightness(.9); } }

/* wooden shelf plank under each porch row */
.pc-plank::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border-radius: 999px;
  background: linear-gradient(to bottom, var(--color-accent-700), var(--color-accent-900));
  box-shadow: 0 10px 18px -8px #000;
}