/*
 * product-mocks/_base.css — shared reset + design tokens (v3.9.86)
 *
 * Every per-product HTML mock SHOULD link this file:
 *   <link rel="stylesheet" href="/product-mocks/_base.css">
 *
 * It exposes Sarvadhi's design tokens (snapshot of v3.9.85) so the
 * mock reads as part of the brand without depending on the marketing
 * site's globals.css (which it can't reach from inside an iframe).
 *
 * Snapshot policy: these values are fixed at the time of authoring.
 * If a Sarvadhi token changes site-wide and you want this file to
 * track, update it here and bump the changelog. Mocks stay visually
 * stable until that re-sync happens.
 */

/* ── Token snapshot (v3.9.85) ───────────────────────────────── */
:root {
  /* Ink scale */
  --color-ink-1: #0A1013;
  --color-ink-2: #1F2937;
  --color-ink-3: #6B7280;
  --color-ink-4: #9CA3AF;

  /* Surfaces */
  --color-bg-page:    #F8F9FC;
  --color-bg-surface: #FFFFFF;

  /* Borders */
  --color-border-default: #E5E7EB;
  --color-border-strong:  #D1D5DB;

  /* Brand + accents */
  --color-primary:          #2A67B2;
  --color-accent-amber-300:  #F8CF91;
  --color-accent-sky-300:    #98CEED;
  --color-accent-teal-300:   #9CD9C6;
  --color-accent-indigo-300: #ACA7E4;
  --color-accent-coral-300:  #F7B594;

  /* Typography */
  --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-eyebrow: 11px;
  --text-body-sm: 13px;
  --text-body:    14px;
  --text-h4:      16px;
  --text-h3:      18px;

  --tracking-eyebrow: 0.04em;
  --leading-snug:     1.5;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* the host card scrolls; mock fills its canvas */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-sans);
  color: var(--color-ink-1);
  background: var(--color-bg-page);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
}

/* ── Canvas helpers ─────────────────────────────────────────── */
/* The host card sizes its iframe to 100% × 100% of the inner area.
   The card is viewport-responsive (clamp 420–760 px tall) so canvas
   height varies with the user's viewport. Practical ranges:
     desktop  ≥ 1024px wide  →  ~1024 × clamp(420, 80vh, 760) px
     tablet   ≤ 1023px       →  ~704 × clamp(420, 80vh, 760) px
     mobile   ≤  640px       →  ~328 × clamp(420, 80vh, 760) px
   Design for ~1024 × 720 desktop / ~704 × 600 tablet / ~328 × 420
   mobile as the typical canvas. Mocks should be responsive within
   those bounds (the .mock-canvas helper below collapses to flex
   column on the narrowest size). */
.mock-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}