/* ============================================================
   bhildOs — Spacing, radius, shadow & layout tokens
   Radii and shadows ported verbatim from --bhild-* in globals.css.
   Spacing scale reflects the paddings used across the source
   (cards 24px, panels 18px, sections 74px vertical).
   ============================================================ */

:root {
  /* ---- Spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  14px;   /* form field gap, card list gap */
  --space-5:  18px;   /* panel body padding */
  --space-6:  22px;   /* card grid gap */
  --space-7:  24px;   /* card padding, wrap side padding */
  --space-8:  32px;
  --space-9:  46px;
  --space-10: 54px;   /* auth / final CTA padding */
  --space-sec: 74px;  /* marketing section vertical rhythm */

  /* ---- Radius (verbatim) ---- */
  --bhild-radius:     14px;   /* cards, inputs, panels */
  --bhild-radius-lg:  20px;   /* pricing tiers, forms, comparison table */
  --radius-btn:       11px;   /* buttons */
  --radius-input:     10px;   /* form inputs, icon buttons */
  --radius-icon:      12px;   /* card icon tiles */
  --radius-pill:      999px;  /* pills, chips, toggles */
  --radius-sm:        9px;    /* nav links, small tiles */

  /* semantic aliases */
  --radius-card:  var(--bhild-radius);
  --radius-panel: var(--bhild-radius);

  /* ---- Shadow (verbatim) ---- */
  --bhild-shadow-sm: 0 1px 2px rgba(16,32,46,.06), 0 1px 3px rgba(16,32,46,.06);
  --bhild-shadow:    0 10px 30px rgba(16,32,46,.10);
  --bhild-shadow-lg: 0 24px 60px rgba(16,32,46,.18);

  /* colored action shadow (primary buttons) */
  --shadow-green:       0 6px 16px rgba(60,154,53,.35);
  --shadow-green-hover: 0 10px 22px rgba(60,154,53,.45);

  --shadow-rest:  var(--bhild-shadow-sm);
  --shadow-hover: var(--bhild-shadow);
  --shadow-pop:   var(--bhild-shadow-lg);

  /* ---- Layout ---- */
  --bhild-maxw: 1180px;   /* marketing content max width (.wrap) */
  --app-maxw:   1280px;   /* in-app content max width */
  --sidebar-w:  248px;
  --topbar-h:   60px;
  --nav-h:      68px;     /* marketing sticky header */

  /* ---- Motion ---- */
  --ease-ui:      cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast:     .12s;   /* @kind other */  /* button press, hover */
  --dur-base:     .14s;   /* @kind other */  /* card lift */
  --dur-slow:     .2s;    /* @kind other */  /* drawer slide */
}