/* The Love Lights type tester.
   Concept: pink light in a dark room. Brand palette from Love-Lights-Brand-Kit.md;
   Jost for the interface (the brand's label face), the typeface itself for display. */

@font-face {
  font-family: "The Love Lights";
  src: url("/fonts/TheLoveLights-Regular.woff2") format("woff2");
  font-display: block;
}

:root {
  /* Brand */
  --pink: #FF4F87;
  --rose: #D92861;
  --cream: #F7EDDF;
  --plum: #52203D;
  --brown-black: #241315;
  --night: #160D10;

  /* Night (default) */
  --bg: var(--night);
  --surface: #211317;
  --surface-2: #2E1B20;
  --text: var(--cream);
  --text-muted: #C7B3A8;
  --border: rgba(247, 237, 223, 0.12);
  --accent: var(--pink);
  --accent-contrast: var(--brown-black);
  --danger: #FF6B7D;

  --glass-bg: rgba(33, 19, 23, 0.62);
  --glass-border: rgba(247, 237, 223, 0.14);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glow: rgba(255, 79, 135, 0.28);

  --font-display: "The Love Lights", Impact, "Arial Black", sans-serif;
  --font-text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.5rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;

  --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 60ms;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--cream);
    --surface: #FFF8EF;
    --surface-2: #EFE1CF;
    --text: var(--brown-black);
    --text-muted: #6B4F52;
    --border: rgba(36, 19, 21, 0.12);
    --accent: var(--rose);
    --accent-contrast: #FFFFFF;
    --danger: #B3263C;
    --glass-bg: rgba(255, 248, 239, 0.66);
    --glass-border: rgba(36, 19, 21, 0.10);
    --glass-shadow: 0 8px 32px rgba(36, 19, 21, 0.10);
    --glow: rgba(255, 79, 135, 0.20);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-0)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.skip { position: absolute; left: -999px; top: var(--s-2); }
.skip:focus { left: var(--s-4); z-index: 20; background: var(--surface); padding: var(--s-2) var(--s-4); }

/* Glass nav */
.glass { background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  }
}
.nav {
  position: fixed; z-index: 10;
  top: calc(var(--s-3) + env(safe-area-inset-top, 0px)); left: var(--s-4); right: var(--s-4);
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
}
.nav__mark {
  font-family: var(--font-display); font-feature-settings: "ss03" 1;
  font-size: 1.35rem; line-height: 1; text-decoration: none; color: var(--accent);
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: var(--s-1); }
.nav__links a {
  font-weight: 500; font-size: var(--step--1); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border-radius: var(--radius-pill);
  transition: background var(--dur-instant) var(--ease-out);
}
.nav__links a:hover { background: var(--surface-2); }
.nav__links .nav__cta { background: var(--accent); color: var(--accent-contrast); font-weight: 700; padding: 0 var(--s-4); }
.nav__links .nav__cta:hover { background: var(--accent); filter: brightness(1.08); }
@media (max-width: 480px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* Pink light, behind everything */
.glow { position: absolute; inset: 0 0 auto 0; height: 110vh; overflow: hidden; pointer-events: none; z-index: -1; }
.glow span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0; animation: lights-on var(--dur-slow) var(--ease-out) forwards; will-change: transform; }
.glow__a { width: 70vw; height: 60vh; left: -15vw; top: -10vh; background: radial-gradient(closest-side, var(--glow), transparent); }
.glow__b { width: 60vw; height: 55vh; right: -20vw; top: 20vh; background: radial-gradient(closest-side, var(--glow), transparent); animation-delay: calc(var(--stagger) * 3) !important; }
@keyframes lights-on { to { opacity: 1; } }

main { position: relative; }
.tester, .section { max-width: 1120px; margin: 0 auto; padding-inline: var(--s-4); }
.tester { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }

.eyebrow, .label {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.intro { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.intro__title { margin: 0; font-weight: 900; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }

/* Stage */
.stage {
  --stage-bg: var(--night); --stage-ink: var(--pink);
  position: relative; border-radius: var(--radius-lg); background: var(--stage-bg);
  border: 1px solid var(--border); overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
.stage[data-theme-stage="flyer"] { --stage-bg: var(--pink); --stage-ink: var(--brown-black); }
.stage[data-theme-stage="paper"] { --stage-bg: var(--cream); --stage-ink: var(--brown-black); }
.stage__text {
  display: block; width: 100%; min-height: 46vh; resize: vertical; border: 0; background: transparent;
  color: var(--stage-ink); caret-color: var(--stage-ink);
  padding: var(--s-8) var(--s-6);
  font-family: var(--font-display); font-size: 120px; line-height: 1.02;
  overflow-wrap: break-word;
  transition: color var(--dur-base) var(--ease-out), opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.stage__text::placeholder { color: var(--stage-ink); opacity: 0.35; }
.stage__text:focus-visible { outline: none; }
.stage:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.stage[data-state="loading"] .stage__text, .stage[data-state="error"] .stage__text { opacity: 0; transform: translateY(8px); }
.stage__status, .stage__error {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-4);
  text-align: center; padding: var(--s-6); color: var(--stage-ink); margin: 0; font-weight: 500;
}
.stage__status { animation: pulse 1.2s var(--ease-in-out) infinite alternate; }
.stage[data-state="ready"] .stage__status, .stage[data-state="error"] .stage__status { display: none; }
.stage__error[hidden], .toast[hidden] { display: none; }
@keyframes pulse { from { opacity: 0.45; } to { opacity: 1; } }

/* Controls */
.controls { display: grid; gap: var(--s-4); padding: var(--s-6) 0 var(--s-4); }
.controls__row { display: grid; gap: var(--s-2); }
.controls__row--split { grid-template-columns: 1fr; gap: var(--s-4); align-items: center; }
@media (min-width: 720px) {
  .controls__row { grid-template-columns: 110px 1fr; align-items: center; gap: var(--s-4); }
  .controls__row--split { grid-template-columns: 1fr auto; }
}
.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); font-weight: 500; font-size: var(--step--1); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.chip:hover { border-color: var(--accent); }
.chip:active { transform: scale(0.97); }
.chip--toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 700; }

.size { display: flex; align-items: center; gap: var(--s-4); }
@media (min-width: 720px) { .size { display: grid; grid-template-columns: 110px 1fr auto; } }
.size input { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); }
.size output { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); min-width: 6ch; text-align: right; font-variant-numeric: tabular-nums; }

.swatches { display: flex; gap: var(--s-2); }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; position: relative; transition: transform var(--dur-instant) var(--ease-out); }
.swatch:active { transform: scale(0.94); }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.swatch--night { background: linear-gradient(135deg, var(--night) 50%, var(--pink) 50%); }
.swatch--flyer { background: linear-gradient(135deg, var(--pink) 50%, var(--brown-black) 50%); }
.swatch--paper { background: linear-gradient(135deg, var(--cream) 50%, var(--brown-black) 50%); }

/* Sections */
.section { padding-top: var(--s-16); }
.section__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.section__head h2 { margin: 0; font-weight: 900; font-size: var(--step-2); line-height: 1.1; }
.section__note { margin: 0; color: var(--text-muted); max-width: 60ch; }

/* Character grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-2); }
.cell {
  display: grid; justify-items: center; align-content: space-between; gap: var(--s-1);
  min-height: 118px; padding: var(--s-3) var(--s-1) var(--s-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.cell:hover { border-color: var(--accent); }
.cell:active { transform: scale(0.96); }
.cell--alt { border-style: dashed; }
.cell__glyph { font-family: var(--font-display); font-size: 52px; line-height: 1; height: 62px; display: flex; align-items: center; font-feature-settings: "calt" 0; }
.cell__tag { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: center; line-height: 1.2; }
.cell--alt .cell__tag { color: var(--accent); }

/* Downloads */
.downloads { display: grid; gap: var(--s-4); }
@media (min-width: 820px) { .downloads { grid-template-columns: 1fr 1fr; } }
.dl { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dl__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1; color: var(--accent); }
.steps { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--text-muted); }
.steps strong { color: var(--text); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); justify-self: start;
  min-height: 48px; padding: 0 var(--s-6); border-radius: var(--radius-pill);
  font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: filter var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--accent); color: var(--accent-contrast); }
.btn--accent:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: var(--text-muted); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--small { min-height: 40px; padding: 0 var(--s-4); font-size: var(--step--1); background: var(--surface-2); border-color: var(--border); }
.btn__meta { font-weight: 500; opacity: 0.75; font-size: var(--step--1); }

.code { display: grid; gap: var(--s-3); }
.code pre {
  margin: 0; padding: var(--s-4); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  font: 0.8rem/1.6 var(--font-mono); color: var(--text-muted); overflow-x: auto;
}

.features { margin-top: var(--s-8); padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.features__title { margin: 0 0 var(--s-4); font-weight: 900; font-size: var(--step-1); }
.features__list { margin: 0; display: grid; gap: var(--s-4); }
@media (min-width: 820px) { .features__list { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-8); } }
.features__list dt { font-weight: 700; }
.features__list dd { margin: var(--s-1) 0 0; color: var(--text-muted); }

/* Origin */
.origin { display: grid; gap: var(--s-4); justify-items: start; padding-bottom: var(--s-8); }
.origin__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.02; color: var(--accent); text-wrap: balance; max-width: 18ch; }
.origin p { margin: 0; max-width: 62ch; color: var(--text-muted); }

.footer { max-width: 1120px; margin: var(--s-12) auto 0; padding: var(--s-6) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); color: var(--text-muted); font-size: var(--step--1); }
.footer p { margin: 0; }
.footer__line { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); }

/* Toast */
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); max-width: calc(100vw - 2 * var(--s-4));
  padding: var(--s-3) var(--s-6); border-radius: var(--radius-pill);
  background: var(--text); color: var(--bg); font-weight: 500; font-size: var(--step--1);
  box-shadow: var(--glass-shadow); animation: toast-in var(--dur-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (max-width: 600px) {
  .stage__text { padding: var(--s-6) var(--s-4); min-height: 38vh; }
  .dl { padding: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  [data-parallax] { transform: none !important; }
  .stage__status { animation: none; }
}