/* marketing-site/assets/site-tokens.css — hand-authored, NOT generated.
 * design-tokens.css (same directory) is the generated mirror of the app's tokens;
 * this file adds the site's own small vocabulary on top of it, PKT-SPEC-MARKETING-20260906:
 *   --gold-hair   the named alias for the canonical .28-alpha gold hairline
 *                 (docs/design/IMPLEMENTATION_SPEC_2026-09-06.md §1, D1).
 *   .island       the dark product-mockup card (protocol §2.6, one bezel idiom):
 *                 warm-black gradient, radius 16, gold hairline, warm shadow.
 *                 Per-instance geometry (border-radius, padding) may still be
 *                 set inline where a page's mockup needs a different size —
 *                 only the literal colour/shadow values live here now.
 *   .bezel        the gold-hairline frame around the capture itself, inside
 *                 an .island or standalone on a light/cream screenshot.
 * Load order: design-tokens.css first, this file second (build.mjs).
 */

:root {
  --gold-hair: color-mix(in srgb, var(--gold-fill) 28%, transparent);
}

.island {
  background: linear-gradient(160deg, rgb(24, 21, 14), rgb(13, 12, 9));
  border-radius: var(--radius-card, 16px);
  padding: 12px;
  box-shadow:
    0 1px 2px rgba(20, 17, 11, .06),
    0 24px 60px -12px rgba(20, 17, 11, .35);
}

.bezel {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gold-hair);
}