/* RatioForge — Spacing, radius, shadow, motion.
   4px spacing base. Radius 8px for inputs/buttons, 12px for cards.
   Exactly ONE soft shadow — on the tool card only. Everything else flat. */

:root {
  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-input: 8px;   /* inputs, buttons, pills */
  --radius-card:  12px;  /* cards, panels */
  --radius-full:  999px; /* switch track, round controls */

  /* The single permitted shadow — tool card only */
  --shadow-card: 0 1px 2px rgba(22,32,44,0.04), 0 8px 24px rgba(22,32,44,0.08);

  /* Focus ring — visible accent, used everywhere interactive */
  --ring-width: 2px;
  --ring-offset: 2px;
  --ring: 0 0 0 var(--ring-width) var(--surface), 0 0 0 calc(var(--ring-width) + 2px) var(--focus-ring);

  /* Motion — calm, quick, no bounce. Respect reduced motion at usage sites. */
  --ease-out: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */

  /* Layout */
  --tool-max: 640px;
  --content-max: 720px;

  /* Reserved ad heights — layout never shifts */
  --ad-h-leaderboard: 90px;   /* desktop top */
  --ad-h-mobile:      100px;  /* mobile banner */
  --ad-h-rectangle:   250px;  /* in-content */
}

[data-theme="dark"] {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
}