/* ====================================================================
 * @sampo/brand — components.css
 * Reusable primitives. Each component is self-contained: no absolute
 * imports, no layout assumptions beyond the tokens in tokens.css.
 *
 * Phase 0 set: theme toggle, preview card + frame, dashed divider,
 * corner mark, toast.
 *
 * Phase 2 will add: .sampo-lockup, .sampo-watermark, and polished
 * demos at packages/brand/demos/.
 * ==================================================================== */

/* ── Lockup — brand mark + stacked wordmark ───────────────────────── */

/* Canonical brand header. Consumers render the mill SVG into the
   `.sampo-lockup-mark` span via SampoMill.iconMark(); the wordmark
   is plain text in the markup.

     <a class="sampo-lockup" href="/">
       <span class="sampo-lockup-mark" id="lockupMark"></span>
       <span class="sampo-lockup-type">
         <span class="sampo-lockup-wordmark">SAMPO</span>
         <span class="sampo-lockup-sub">DIAGNOSTIC KIT</span>
       </span>
     </a>
*/

.sampo-lockup,
.lockup /* legacy alias */ {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sampo-lockup-mark,
.lockup-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.sampo-lockup-mark svg,
.lockup-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sampo-lockup-type,
.lockup-type {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.sampo-lockup-wordmark,
.lockup-wordmark {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.sampo-lockup-sub,
.lockup-sub {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* ── Sampo divider — standalone dashed rule ───────────────────────── */

/* Horizontal rule that carries the mill's dashed-ring vocabulary.
   Use between sections, or as a sibling inside a full-width band. */
.sampo-divider {
  border: 0;
  border-top: 1px dashed var(--border-strong);
  margin: var(--sp-6) 0;
}

/* ── Sampo watermark — big faint mill for section backgrounds ─────── */

/* Decorative mill that sits behind content. Parent needs position:
   relative; sensible defaults for common placements can be overridden
   with data-* or inline style.

     <section style="position: relative">
       <div class="sampo-watermark" aria-hidden="true"></div>
       …content…
     </section>

   The SVG is injected via SampoMill.iconMark(size, { transparent: true,
   showOuter: true, theme }). Motion (slow rotation on scroll) comes in
   Phase 5; at rest the element is a static fixture. */
.sampo-watermark {
  position: absolute;
  right: -80px;
  top: 24px;
  width: 260px;
  height: 260px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
  transition: opacity .25s ease, transform .6s ease;
}

.sampo-watermark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Slightly more visible in dark mode — the cream ink disappears
   against the dark background at 0.08. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sampo-watermark { opacity: 0.12; }
}
:root[data-theme="dark"] .sampo-watermark { opacity: 0.12; }

/* ── Theme toggle ─────────────────────────────────────────────────── */

.sampo-theme-toggle,
.theme-toggle /* legacy alias */ {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: border-color .15s, border-style .15s;
  margin-left: 4px;
}

.sampo-theme-toggle:hover,
.theme-toggle:hover {
  border-color: var(--border-strong);
  border-style: dashed;
}

/* Moon-glyph: a circle with an offset inner shadow creating the
   crescent. Flips correctly between themes via currentColor-adjacent
   tokens. */
.sampo-theme-toggle-glyph,
.theme-toggle-glyph {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset -4px -4px 0 var(--ink);
  border: 1px solid var(--ink);
}

/* ── Dashed divider after section headings ────────────────────────── */

/* A section heading plus its dashed horizontal rule. Consumers mark
   a heading with class="section" (on h2 or any other tag) and the
   rule extends to fill the row. */
.section,
h2.section {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section::after,
h2.section::after {
  content: '';
  flex: 1;
  border-top: 1px dashed var(--border-strong);
}

.section-caption {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 22px 0;
}

/* ── Corner mark ──────────────────────────────────────────────────── */

/* Small inline mill icon that sits beside a heading. Rotates on the
   parent's :hover — paired with a container that knows to expose
   that hover (.lib-kit in the generator). */
.lib-kit-corner-mark,
.sampo-corner-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .2s ease, transform .3s ease;
  flex: 0 0 28px;
  vertical-align: middle;
}

.lib-kit-corner-mark svg,
.sampo-corner-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lib-kit:hover .lib-kit-corner-mark,
:hover > .sampo-corner-mark {
  opacity: 0.85;
  transform: rotate(12deg);
}

/* ── Preview card — cream-framed asset embed ──────────────────────── */

/* The canonical "here's what the shareable PNG looks like" block.
   Interior is always cream because the asset ships cream. */
.preview-card {
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 28px;
  color: var(--g-ink);
}

.preview-card .meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.preview-card .meta .title {
  font-weight: 700;
  font-size: 14px;
  color: var(--g-ink);
}

.preview-card .meta .dim {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--g-muted);
  font-size: 13px;
}

.preview-card .meta .actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Checkered transparent-background for the asset itself — so users
   can tell at a glance whether the exported PNG is transparent or
   filled. */
.preview-frame {
  background-color: var(--checker-base, #ECE6D0);
  background-image:
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-a) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-a) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  overflow: auto;
  padding: 14px;
  display: flex;
  justify-content: center;
}

.preview-frame svg {
  display: block;
  max-width: 100%;
  max-height: 560px;
  height: auto;
  width: auto;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

.preview-frame.fit-wide svg {
  max-width: 100%;
  max-height: none;
}

/* ── Buttons — base + primary + preview-card override ─────────────── */

button.btn,
a.btn {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: border .12s ease, background .12s ease;
}

button.btn:hover,
a.btn:hover {
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--border-strong);
}

button.btn.primary,
a.btn.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

button.btn.primary:hover,
a.btn.primary:hover {
  background: var(--ink);
  filter: brightness(1.15);
  border-style: dashed;
}

/* Ghost — transparent bg, subtle border. Used for secondary actions
   in prose-heavy contexts (the site's section CTAs). */
button.btn.btn-ghost,
a.btn.btn-ghost,
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

button.btn.btn-ghost:hover,
a.btn.btn-ghost:hover,
.btn-ghost:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}

/* Dashed-hover — solid border at rest, dashed on hover. Utility
   class for any interactive surface where we want the mill's
   dashed-ring vocabulary to leak in on interaction. Stack it with
   any other button modifier. */
.btn-dashed-hover {
  transition: border-style .15s, border-color .15s;
}

.btn-dashed-hover:hover {
  border-style: dashed;
  border-color: var(--border-strong);
}

/* CTA — the one place the pumpkin accent fills an interactive
   element. Reserved for primary site actions ("Try the kit",
   "Open the generator"). The generator's inline primary buttons
   use var(--ink) instead; the site uses pumpkin. */
button.btn.btn-cta,
a.btn.btn-cta,
.btn-cta {
  background: var(--pumpkin);
  color: #fff;
  border: 1px solid var(--pumpkin);
  font-weight: 600;
}

button.btn.btn-cta:hover,
a.btn.btn-cta:hover,
.btn-cta:hover {
  filter: brightness(1.08);
  border-style: dashed;
  border-color: var(--pumpkin);
  color: #fff;
}

/* Buttons inside a preview-card live on cream — force graphic-palette
   colors so they read consistently in both light and dark mode. */
.preview-card button.btn {
  background: var(--g-bg);
  color: var(--g-ink);
  border-color: var(--card-border);
}

.preview-card button.btn:hover {
  background: #FFF8E8;
  border-color: var(--g-ink);
}

.preview-card button.btn.primary {
  background: var(--g-ink);
  color: var(--g-bg);
  border-color: var(--g-ink);
}

.preview-card button.btn.primary:hover {
  background: #000;
}

/* ── Toast ────────────────────────────────────────────────────────── */

.sampo-toast,
.toast /* legacy alias */ {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px 12px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--pumpkin);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 100;
}

.sampo-toast.show,
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Canvas watermark ─────────────────────────────────────────────── */

/* Faint decorative mill in the corner of a tab header. Subtle
   animation on theme change handled by JS — not a keyframe. */
.canvas-header {
  position: relative;
  margin-bottom: 10px;
  min-height: 80px;
}

.canvas-header-text {
  position: relative;
  z-index: 2;
}

.canvas-watermark {
  position: absolute;
  right: -40px;
  top: -30px;
  width: 180px;
  height: 180px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .canvas-watermark { opacity: 0.22; }
}
:root[data-theme="dark"] .canvas-watermark { opacity: 0.22; }