/**
 * LAOUTS · Brand tokens · engine baseline
 *
 * Extracted from laouts-velvet-plum-theme.css (colors, type scale, radii).
 * Loaded by ui/index.html only — marketing pages keep full theme files.
 *
 * Structural chrome lives in laouts-engine-chrome.css (+ deferred shell chunk).
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,200;9..144,0,300;9..144,0,400;9..144,0,500;9..144,0,700;9..144,0,900;9..144,1,200;9..144,1,300;9..144,1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Surfaces — Velvet Plum */
  --laouts-bg:        #1c1119;
  --laouts-bg-1:      #241420;
  --laouts-bg-2:      #2a1825;
  --laouts-bg-3:      #3a2435;

  --laouts-card-grad-rest:     linear-gradient(165deg, #241420 0%, #1c1019 100%);
  --laouts-card-grad-selected: linear-gradient(165deg, #3a2435 0%, #2a1825 100%);
  --laouts-card-grad-strip:    linear-gradient(165deg, #2a1825 0%, #1c1019 100%);

  --laouts-coral:        #e8a585;
  --laouts-coral-deep:   #d4856a;
  --laouts-coral-soft:   #f3c8a8;
  --laouts-coral-glow:   rgba(232, 165, 133, 0.18);
  --laouts-coral-shadow: rgba(232, 165, 133, 0.28);

  --laouts-bone:        #f3e6dc;
  --laouts-bone-soft:   #d8b8b5;
  --laouts-mauve:       #c9a8a8;
  --laouts-mauve-soft:  #a88a8c;
  --laouts-taupe:       #6a5a55;

  --laouts-hairline:     #2a1a26;
  --laouts-hairline-2:   #3a2435;

  --laouts-font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --laouts-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --laouts-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Monaco", monospace;

  --laouts-text-min:     14px;
  --laouts-body:         17px;
  --laouts-body-large:   18px;
  --laouts-italic-min:   22px;

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

  --laouts-muted:       #8a8273;

  --laouts-topbar-h:    56px;
  --laouts-stepper-h:    48px;
  --laouts-look-strip-h: 38px;

  --laouts-tool-rail-w:       16px;
  --laouts-tool-rail-w-open:  88px;
}

/**
 * Cool-gray depth tokens for tool panels / recipe grid (was body.laouts in dark-matcha).
 */
body.laouts {
  --rc-ground:       #0d0d0f;
  --rc-chrome:       #15151a;
  --rc-panel:        #26272c;
  --rc-card:         #3a3b40;
  --rc-card-hover:   #45464c;
  --rc-card-active:  #3a3b40;
  --rc-tile:         #54565c;
  --rc-divider:      rgba(255, 255, 255, 0.08);
  --rc-text:         #ffffff;
  --rc-text-soft:    #c2c4c8;
  --rc-text-muted:   #8a8c92;
  --rc-status:       #5dca7e;
  --rc-accent:       #ffffff;
  --rc-accent-soft:  rgba(255, 255, 255, 0.18);
  --rc-accent-glow:  rgba(255, 255, 255, 0.30);
  --rc-accent-hover: #f0f0f0;
  --rc-accent-bg:    rgba(255, 255, 255, 0.08);
  --rc-accent-ink:   #0d0d0f;

  /* Legacy shim — rails / flyouts still reference --laouts-acid */
  --laouts-acid:       var(--laouts-coral);
  --laouts-acid-soft:  var(--laouts-coral-soft);
  --laouts-acid-glow:  var(--laouts-coral-glow);

  background: var(--laouts-bg);
  color: var(--laouts-bone);
  font-family: var(--laouts-font-sans);
  font-size: var(--laouts-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  padding-top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h));
}

body.laouts.laouts--lookStripActive {
  padding-top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h) + var(--laouts-look-strip-h));
}

body.laouts:has(#cepOrderExperience:not([hidden])) {
  padding-top: 0;
}

/** Engine bench: remap warm plum tokens to cool gray (same as retired matcha engine block). */
body.laouts:has(#imageGalleryDock),
body.laouts:has(#wrap.bookSpreadFrame) {
  --laouts-bg:         #0d0d0f;
  --laouts-bg-1:       #15151a;
  --laouts-bg-2:       #26272c;
  --laouts-bg-3:       #3a3b40;
  --laouts-bone:       #ffffff;
  --laouts-bone-soft:  #c2c4c8;
  --laouts-muted:      #8a8c92;
  --laouts-hairline:   rgba(255, 255, 255, 0.06);
  --laouts-hairline-2: rgba(255, 255, 255, 0.12);
}

@media (max-width: 720px) {
  body.laouts {
    --laouts-topbar-h: 48px;
  }
}

@media print {
  body.laouts {
    padding-top: 0 !important;
  }
}

/* Italic discipline (was velvet-plum theme). */
body.laouts p,
body.laouts span,
body.laouts li,
body.laouts td,
body.laouts li small,
body.laouts label {
  font-style: normal;
}
body.laouts em,
body.laouts i {
  font-style: italic;
}
body.laouts em.laoutsKeepItalic,
body.laouts i.laoutsKeepItalic {
  font-style: italic;
}