/* ============================================================================
   Laesi live demo — site skin
   ----------------------------------------------------------------------------
   Loaded on the homepage AFTER /assets/demo/laesi-demo.css (which is generated
   from marketing/demo/laesi-demo.html). Nothing here changes how the demo
   behaves — it re-points the demo's design tokens at this site's palette and
   fonts so the widget reads as part of the page instead of a pasted-in iframe.

   Two rules for editing this file:

   1. Never edit the generated stylesheet. Regenerating the demo in the app repo
      overwrites it; this file survives.
   2. Leave the knowledge-level colours alone. The blue/red/amber/green ramp is
      what a user sees in the real app, so it stays authentic even though the
      chrome around it goes warm.

   Site tokens, for reference (see layouts/base.html):
     cream 50 #faf5ea · 100 #f3ead5 · 200 #e8dcc0 · 300 #d9caa1
     ink   400 #7a7267 · 600 #5a5248 · 700 #3a342b · 800 #25211b · 900 #16130f
     ember 400 #e28558 · 500 #d46b43 · 600 #bf5630 · 700 #9c4323
   ========================================================================== */

/* --- Tokens: light ------------------------------------------------------- */

.laesi-demo {
  --paper: #f3ead5;   /* cream-100 — the app chrome */
  --paper-2: #faf5ea; /* cream-50  — the page you read on */
  --ink: #3a342b;
  --ink-soft: #5a5248;
  --ink-strong: #16130f;
  --line: #e8dcc0;

  /* ember-600 for accent text and borders: 4.6:1 on cream, unlike ember-500 */
  --accent: #bf5630;
  --accent-2: #9c4323;
  --accent-light: rgba(191, 86, 48, 0.12);

  /* Solid ember fills follow the site's CTA convention — ink on ember, not
     white on ember, which is both darker and better contrast (5.3:1). */
  --accent-ink: #16130f;

  --il-gloss-color: #5a5248;

  /* Sit the card on the hero the way the other homepage cards do */
  font-family: "Inter", system-ui, sans-serif;
  border-color: rgba(22, 19, 15, 0.1);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(22, 19, 15, 0.18);
}

/* --- Type: the site's three faces, already loaded by base.html ----------- */

.laesi-demo {
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-read: "Lora", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* JetBrains Mono runs wide — match the tracking base.html gives .font-display */
.laesi-demo .ld-brand,
.laesi-demo .ld-h,
.laesi-demo .ld-take-h,
.laesi-demo .ld-modal-header h3 {
  letter-spacing: -0.01em;
}

.laesi-demo .ld-cov {
  letter-spacing: -0.02em;
}

/* --- Surfaces the demo hard-codes rather than tokenising ----------------- */

.laesi-demo .ld-head {
  background: linear-gradient(180deg, #faf5ea, var(--paper));
}

.laesi-demo .ld-aside,
.laesi-demo .ld-foot {
  background: var(--paper);
}

.laesi-demo .ld-page {
  color: #16130f;
}

.laesi-demo .ld-seg,
.laesi-demo .ld-foot code {
  background: #e8dcc0;
}

.laesi-demo .ld-seg button[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgba(22, 19, 15, 0.1);
}

/* Popups and modals stay on cream — a pure-white sheet reads cold here */
.laesi-demo .ld-pop {
  background: #faf5ea;
  border-color: #d9caa1;
  box-shadow: 0 4px 20px rgba(22, 19, 15, 0.16);
}

.laesi-demo .ld-modal {
  background: #faf5ea;
  box-shadow: 0 12px 40px rgba(22, 19, 15, 0.22);
}

.laesi-demo .ld-modal-overlay {
  background: rgba(22, 19, 15, 0.45);
}

.laesi-demo .ld-levels button,
.laesi-demo .ld-pbtn,
.laesi-demo .ld-field input,
.laesi-demo .ld-field select {
  background: #f3ead5;
}

.laesi-demo .ld-levels button {
  border-color: #d9caa1;
  color: #16130f;
}

/* --- Ember accents ------------------------------------------------------- */

.laesi-demo .ld-btn.primary {
  background: #d46b43; /* ember-500, as on every other CTA on the page */
  border-color: #d46b43;
}

.laesi-demo .ld-btn.primary:hover {
  background: #bf5630;
  border-color: #bf5630;
}

/* The demo only dims disabled buttons, so an empty Anki queue still shows a
   filled ember Export that looks clickable. Drop the fill instead. */
.laesi-demo .ld-btn.primary:disabled,
.laesi-demo .ld-btn.primary:disabled:hover {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.laesi-demo .ld-chip-demo {
  color: #9c4323;
  background: rgba(212, 107, 67, 0.12);
  border-color: rgba(212, 107, 67, 0.28);
}

.laesi-demo .ld-anki-list .ax:hover {
  color: #9c4323;
  background: rgba(191, 86, 48, 0.12);
}

/* --- Embed trims -------------------------------------------------------- */

/* The demo's own tagline restates the section lede directly above it. Drop it
   and the header reads as what it is: the app's title bar. */
.laesi-demo .ld-tag {
  display: none;
}

/* --- Tokens: dark ------------------------------------------------------- */

/* The demo ships a neutral-grey dark mode. The site's dark surfaces are warm
   ink, so retune it — the toggle is a real feature and should look like Laesi
   in both states. */
.laesi-demo[data-theme="dark"] {
  --paper: #16130f;
  --paper-2: #25211b;
  --ink: #f3ead5;
  --ink-soft: #a69c89;
  --ink-strong: #faf5ea;
  --line: #3a342b;

  --accent: #e28558;
  --accent-2: #f0a582;
  --accent-light: rgba(226, 133, 88, 0.16);
  --accent-ink: #16130f;

  --il-gloss-color: #a69c89;

  border-color: rgba(250, 245, 234, 0.12);
}

.laesi-demo[data-theme="dark"] .ld-head {
  background: linear-gradient(180deg, #25211b, var(--paper));
}

.laesi-demo[data-theme="dark"] .ld-page {
  color: #f3ead5;
}

.laesi-demo[data-theme="dark"] .ld-aside,
.laesi-demo[data-theme="dark"] .ld-foot {
  background: #1d1914;
}

.laesi-demo[data-theme="dark"] .ld-seg {
  background: #100e0b;
}

.laesi-demo[data-theme="dark"] .ld-foot code {
  background: #3a342b;
}

.laesi-demo[data-theme="dark"] .ld-pop,
.laesi-demo[data-theme="dark"] .ld-modal {
  background: #25211b;
  border-color: #3a342b;
}

.laesi-demo[data-theme="dark"] .ld-levels button,
.laesi-demo[data-theme="dark"] .ld-pbtn,
.laesi-demo[data-theme="dark"] .ld-field input,
.laesi-demo[data-theme="dark"] .ld-field select {
  background: #25211b;
  border-color: #3a342b;
  color: var(--ink);
}

.laesi-demo[data-theme="dark"] .ld-btn.primary {
  background: #d46b43;
  border-color: #d46b43;
  color: #16130f;
}

.laesi-demo[data-theme="dark"] .ld-btn.primary:hover {
  background: #e28558;
  border-color: #e28558;
}

.laesi-demo[data-theme="dark"] .ld-chip-demo {
  color: #e28558;
  background: rgba(226, 133, 88, 0.14);
  border-color: rgba(226, 133, 88, 0.3);
}

.laesi-demo[data-theme="dark"] .ld-anki-list .ax:hover {
  color: #e28558;
  background: rgba(226, 133, 88, 0.14);
}