*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --cyan:#06B6D4;
  --cyan-dim:#06B6D410;
  --cyan-b:#06B6D430;
  --cyan-hover:#0891B2;
  /* ── Radius scale ── */
  --r-sm:4px; --r-base:6px; --r-md:8px; --r-lg:10px; --r-xl:12px;
  /* ── Spacing scale ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* ── Font scale ── */
  --f-xs:10px; --f-sm:11px; --f-base:13px; --f-md:14px; --f-lg:15px; --f-xl:16px;
  /* ── Semantic colors ── */
  --c-success:#22c55e; --c-success-bg:#f0fdf4; --c-success-bd:#bbf7d0; --c-success-tx:#166534;
  --c-danger:#ef4444;  --c-danger-bg:#fef2f2;  --c-danger-bd:#fecaca;  --c-danger-tx:#991b1b;
  --c-warning:#f59e0b; --c-warning-bg:#fffbeb; --c-warning-bd:#fde68a; --c-warning-tx:#92400e;
  --c-info:#3b82f6;    --c-info-bg:#eff6ff;    --c-info-bd:#bfdbfe;    --c-info-tx:#1e40af;
  /* ── Semantic opacity variants ── */
  --c-success-b:#22c55e40;    --c-success-dim:#22c55e0d;
  --c-danger-b:#ef444440;     --c-danger-dim:#ef44440d;    --c-danger-muted:#ef444415;
  --c-warning-b:#f59e0b40;    --c-warning-dim:#f59e0b0d;
}
[data-theme=dark]{
  --c-success-bg:#052e16; --c-success-bd:#166534; --c-success-tx:#4ade80;
  --c-danger-bg:#450a0a;  --c-danger-bd:#991b1b;  --c-danger-tx:#f87171;
  --c-warning-bg:#431407; --c-warning-bd:#92400e; --c-warning-tx:#fbbf24;
  --c-info-bg:#172554;    --c-info-bd:#1e40af;    --c-info-tx:#93c5fd;
  /* Dark mode semantic overlay backgrounds */
  --c-success-over:#065f4615;
  --c-danger-over:#991b1b15;
  --c-warning-over:#92400e15;
  --c-info-over:#1e40af15;
}

[data-theme=light]{
  --bg:#fafafa;
  --bg2:#f5f5f5;
  --sur:#ffffff;
  --sur2:#fafafa;
  --bd:#e5e5e5;
  --bd2:#d4d4d4;
  --tx:#111111;
  --tx2:#666666;
  --mu:#999999;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 4px 8px rgba(0,0,0,.07);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10);
}

[data-theme=dark]{
  --bg:#000000;
  --bg2:#0a0a0a;
  --sur:#111111;
  --sur2:#1a1a1a;
  --bd:#282828;
  --bd2:#3a3a3a;
  --tx:#ededed;
  --tx2:#888888;
  --mu:#555555;
  --shadow:none;
  --shadow-md:none;
  --shadow-lg:0 0 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.8);
}