/* Portaki — Radius, shadow & spacing tokens
   Source: DESIGN.md §2/§3 (portaki-web + portaki-landing). Rules are non-negotiable:
   inputs/buttons 8px, cards 10–14px, modals 14–16px, pills 9999px. */

:root {
  /* ── Radii ────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* default: inputs, buttons */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* modals, sheets, large cards */
  --radius-full: 9999px; /* pills, badges, avatars */

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-card: 0 1px 4px rgba(9, 9, 11, 0.04);
  --shadow-pop: 0 8px 28px rgba(9, 9, 11, 0.1), 0 0 0 1px rgba(9, 9, 11, 0.06); /* menus, popovers */
  --shadow-modal: 0 24px 60px rgba(9, 9, 11, 0.25), 0 4px 12px rgba(9, 9, 11, 0.08);
  --shadow-drawer: -24px 0 60px rgba(9, 9, 11, 0.18); /* sheet slides in from right */
  --shadow-amber: 0 0 16px rgba(245, 158, 11, 0.25);  /* primary CTA glow */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ── Glassmorphism — primary surface treatment (cards, modals, sheets, nav) ── */
  --glass-blur-sm: 8px;   /* level 3 — badges, chips */
  --glass-blur-md: 16px;  /* level 1 — primary cards, modals */
  --glass-blur-lg: 20px;  /* level 2 — scrolled nav, sheets */
  --glass-saturate: 180%;

  /* ── Spacing — Tailwind's default 4px-step scale, no custom additions ── */
  --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;

  /* ── Density (DESIGN.md §3.8) ────────────────────────────── */
  --header-height: 60px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --section-padding: 24px; /* 22–28px range */

  /* ── Motion ───────────────────────────────────────────────── */
  --duration-micro: 150ms; /* @kind other */
  --duration-reveal: 200ms; /* @kind other */
  --duration-page: 400ms; /* @kind other */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: ease-in-out; /* @kind other */

  /* ── Hit targets ──────────────────────────────────────────── */
  --hit-target-desktop: 36px;
  --hit-target-mobile: 44px;
}