/* ── Der blasse Schimmer — Spacing, Radii, Frame & Safe Zones ──
   The canvas is 1080×1920 (9:16). Overlays live in the top third (hooks) and the
   bottom third (captions, product tags) — the optical centre stays clear for the
   face or product. Captions must clear the native TikTok/Instagram UI. */

:root {
  /* ── Base spacing scale (px, canvas-scale) ── */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  80px;
  --space-8:  120px;

  /* ── Corner radii ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-pill: 999px;   /* caption pill, tags */

  /* ── Hairline borders ── */
  --border-hairline: 1.5px;

  /* ── The editorial white frame — appears on every framed surface ── */
  --frame-inset:   48px;
  --frame-width:   1.5px;
  --frame-opacity: 0.4; /* @kind other */

  /* ── Canvas geometry (1080×1920 reference) ── */
  --canvas-w: 1080px;
  --canvas-h: 1920px;

  /* ── Safe zones ──
     Side margins keep type off the edges; the bottom safe zone clears the
     platform's native chrome (caption, action rail, progress bar). */
  --safe-x:        72px;   /* left/right gutter */
  --safe-top:      120px;  /* below status bar */
  --safe-bottom:   430px;  /* above IG/TikTok native UI — captions sit here */
  --top-third:     640px;  /* hook overlays live above this line */

  /* ── Soft shadows — diffuse, never hard black ──
     The "pale shimmer": light is soft and ambient, shadows barely there. */
  --shadow-soft:  0 2px 12px rgba(44, 37, 35, 0.06);
  --shadow-card:  0 8px 40px rgba(44, 37, 35, 0.10);
  --shadow-lift:  0 18px 60px rgba(44, 37, 35, 0.16);
  /* readability shadow for type sitting directly on video */
  --shadow-text:  0 1px 24px rgba(44, 37, 35, 0.28);

  /* ── Protection gradients — for legibility over unknown footage ── */
  --scrim-bottom: linear-gradient(to top, rgba(44,37,35,0.55) 0%, rgba(44,37,35,0) 60%); /* @kind other */
  --scrim-top:    linear-gradient(to bottom, rgba(44,37,35,0.45) 0%, rgba(44,37,35,0) 55%); /* @kind other */
}