/* ── Runtime Design Tokens ── */

:root{
  /* ── Viewport ── */
  --app-height:100dvh;

  /* ── Focus ── */
  --focus-x:50%;
  --focus-y:35%;

  /* ── Safe Area ── */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  /* ── Motion ── */
  --motion-fast:0.15s;
  --motion-normal:0.3s;
  --motion-slow:0.6s;
  --motion-ease:cubic-bezier(0.4,0,0.2,1);
  --motion-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* ── Radius ── */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-card:12px;
  --radius-popup:20px;
  --radius-full:99px;

  /* ── Z Layer ── */
  --z-base:1;
  --z-popup:1000;
  --z-signin:2000;
  --z-player:3000;
  --z-chat:5000;
  --z-splash:9000;
  --z-loading:9999;

  /* ── Overlay ── */
  --overlay-dark:rgba(0,0,0,0.6);
  --overlay-light:rgba(255,255,255,0.06);
  --overlay-glow:rgba(139,92,246,0.1);

  /* ── Color ── */
  --c-bg:#000;
  --c-surface:#111;
  --c-surface2:#1a1a1a;
  --c-border:#222;
  --c-text:#fff;
  --c-text2:#999;
  --c-text3:#555;
  --c-accent:#8b5cf6;
  --c-accent2:#a78bfa;
  --c-success:#22c55e;
  --c-error:#ef4444;

  /* ── Typography ── */
  --font-sans:-apple-system,'PingFang SC','Helvetica Neue',sans-serif;
  --font-mono:'SF Mono','Menlo',monospace;

  /* ── Spacing (normal) ── */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:14px;
  --space-lg:20px;
  --space-xl:28px;

  /* ── Font Size (normal) ── */
  --fs-xs:10px;
  --fs-sm:12px;
  --fs-md:14px;
  --fs-lg:18px;
  --fs-xl:24px;
  --fs-title:32px;
}

/* ── Compact: iPhone SE / small Android (<=360px) ── */
[data-device="compact"]{
  --space-xs:2px;
  --space-sm:6px;
  --space-md:10px;
  --space-lg:14px;
  --space-xl:20px;

  --fs-xs:9px;
  --fs-sm:11px;
  --fs-md:13px;
  --fs-lg:16px;
  --fs-xl:20px;
  --fs-title:28px;

  --radius-card:10px;
  --radius-popup:16px;
}

/* ── Wide: tablet-ish (>=768px) ── */
[data-device="wide"]{
  --space-lg:24px;
  --space-xl:32px;
}

/* ── Tablet (>=1024px) ── */
[data-device="tablet"]{
  --space-lg:28px;
  --space-xl:40px;
  --fs-title:36px;
}