/* ---------------------------------------------------------------------------
   preview-kit.css — the shared chrome every preview.html starts from.

   Loaded as a plain <link rel="stylesheet"> so previews stay dependency-free
   and openable directly from the filesystem (README.md, "preview.html").

   Holds two things only:
     1. The token block — CSS custom properties mirroring tokens/*.json.
     2. Page chrome — body, toolbar, section labels, skeleton shimmer.

   Component CSS does NOT belong here. A card's styles live in its own
   render.js, which installs them when the card is registered, so a screen that
   uses two cards gets exactly those two cards' styles and nothing else.

   KNOWN DISCREPANCY, carried over deliberately: in dark theme these values are
   shifted one step up from tokens/colors.json — what is called
   surface-container-lowest here is the token file's surface-container-low, and
   --color-page takes the token file's lowest. Every existing preview was built
   against this shift, so changing it would restyle committed cards. Recorded in
   README.md's Known gaps; fix it there, once, for everything.
   --------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --color-page: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f5;
  --color-surface-container-high: #e7e8e9;
  --color-surface-container-highest: #e1e3e4;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #3c4947;
  --color-outline: #6c7a77;
  --color-outline-variant: #bbcac6;
  --color-primary: #006b5f;
  --color-on-primary: #ffffff;
  --color-primary-container: #14b8a6;
  --color-secondary: #a93349;
  --color-secondary-container: #fe7488;
  --color-on-secondary-container: #730425;
  --color-action-container: #5bd1d7;
  --color-on-action-container: #042d2f;
  --color-tertiary: #855300;
  --color-tertiary-container: #e49200;
  --color-on-tertiary-container: #543300;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  /* Page and card share one white — nothing left to separate them but this
     hairline. A drop-shadow reads as elevation only when the surface below
     it is a different tone; equal-tone page/card made the old blurred
     shadow just look like haze, not depth, so light theme trades it for a
     1px border instead. Dark theme keeps true elevation (page and card are
     genuinely different tones there), so its shadow is untouched below. */
  --shadow-card: 0 0 0 1px var(--color-outline-variant);
  --shadow-screen: 0 18px 48px rgba(25, 28, 29, 0.18);
}

:root[data-theme="dark"] {
  --color-page: #090f0e;
  --color-surface-container-lowest: #161d1b;
  --color-surface-container-low: #1a211f;
  --color-surface-container-high: #252b2a;
  --color-surface-container-highest: #2f3634;
  --color-on-surface: #dde4e1;
  --color-on-surface-variant: #bbcac6;
  --color-outline: #859490;
  --color-outline-variant: #3c4947;
  --color-primary: #4fdbc8;
  --color-on-primary: #003731;
  --color-primary-container: #14b8a6;
  --color-secondary: #db4d68;
  --color-secondary-container: #fe7488;
  --color-on-secondary-container: #730425;
  --color-action-container: #5bd1d7;
  --color-on-action-container: #042d2f;
  --color-tertiary: #ffb59e;
  --color-tertiary-container: #f38764;
  --color-on-tertiary-container: #6c2106;
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --shadow-card: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
  --shadow-screen: 0 18px 48px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px;
  background: var(--color-page);
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--color-on-surface);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.toolbar button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  cursor: pointer;
}

.variant__label {
  display: block;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 10px;
}

.section-label {
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-on-surface-variant);
  margin: 32px 0 12px;
}
.section-label:first-of-type { margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
  align-items: start;
  gap: 20px;
}

.skeleton {
  background: var(--color-surface-container-low);
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-on-surface) 8%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}