/* Worthio CSS vNext — Tokens
   Single source of truth for spacing, radii, shadows, motion, and color variables.
*/
:root{
  /* Spacing (8pt-ish) */
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px;
  --space-10:10px; --space-12:12px; --space-14:14px; --space-16:16px;
  --space-20:20px; --space-24:24px; --space-28:28px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-56:56px; --space-64:64px;

  /* Sticky offsets (header + safe spacing) */
  --sticky-top: 64px;

  /* Common paddings */
  --pad-card: var(--space-16);
  --pad-card-lg: var(--space-20);
  --pad-pane: 18px;

  /* Legacy aliases (for older markup/utils) */
  --space-xs:6px; --space-sm:10px; --space-md:16px; --space-lg:24px; --space-xl:36px; --space-xxl:56px;
  --space-36:36px;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px;

  /* Radius */
  --radius-10:10px; --radius-12:12px; --radius-14:14px; --radius-16:16px;
  --radius-20:20px; --radius-24:24px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-32: 32px;
  --text-40: 40px;

  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.2,1.25,.2,1);

  /* Shadows (subtle, Apple-ish) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --shadow-2: 0 10px 30px rgba(0,0,0,.08);
  --shadow-3: 0 18px 60px rgba(0,0,0,.12);

  /* --- Theming variables (mapped in theme layer) --- */
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-soft: #f6f7f9;
  --surface-soft: rgba(255,255,255,.72);
  --text: #0b0c0f;
  --text-2: rgba(11,12,15,.72);
  --text-3: rgba(11,12,15,.55);

  --border: rgba(16,24,40,.10);
  --border-2: rgba(16,24,40,.14);

  --primary: #111111;
  --primary-2: rgba(17,17,17,.85);
  --on-primary: #ffffff;

  --good: #0f9d58;
  --warn: #f59e0b;
  --bad:  #ef4444;

  --focus: rgba(17,17,17,.22);

  /* Layout */
  --wrap: 1080px;
  --wrap-narrow: 860px;

  /* Pass 4: panel scroll + sticky internals */
  --panel-max-h: 74dvh;
  --panel-min-h: 420px;
  --panel-max-h-desktop: 720px;
  --panel-gutter: 18px;

}

/* Explicit cascade layer order (guarantees predictable overrides) */
@layer reset, base, layout, components, utilities, theme;