:root{
  /* Radii — the brand rounds generously. Content cards sit at 20–28px,
     data blocks at 12–14px, chips and buttons are fully rounded. */
  --yd-radius-xs:6px;
  --yd-radius-sm:10px;
  --yd-radius-md:14px;
  --yd-radius-lg:20px;
  --yd-radius-xl:28px;
  --yd-radius-2xl:36px;
  --yd-radius-full:999px;

  /* Borders — the yellow hairline outline is the brand's signature card edge. */
  --yd-border-width:1px;
  --yd-border-width-thick:2px;
  --yd-border-card:1px solid var(--yd-yellow);
  --yd-border-subtle:1px solid var(--yd-neutral-200);
  --yd-border-strong:1px solid var(--yd-periwinkle);
  --yd-border-inverse:1px solid rgba(255,255,255,.24); /* @kind color */

  /* Shadows. The brand's own device is a HARD offset in periwinkle — no blur.
     Soft shadows are reserved for floating UI (menus, dialogs, toasts). */
  --yd-shadow-offset-sm:4px 4px 0 var(--yd-periwinkle);
  --yd-shadow-offset:8px 8px 0 var(--yd-periwinkle);
  --yd-shadow-offset-lg:16px 16px 0 var(--yd-periwinkle);
  --yd-shadow-offset-yellow:8px 8px 0 var(--yd-yellow);
  --yd-shadow-soft:0 1px 2px rgba(35,35,58,.05),0 8px 24px rgba(16,38,148,.06);
  --yd-shadow-raised:0 2px 4px rgba(35,35,58,.06),0 16px 40px rgba(16,38,148,.10);
  --yd-shadow-overlay:0 24px 64px rgba(16,38,148,.18);
  --yd-shadow-inset:inset 0 1px 0 rgba(255,255,255,.5);

  /* Focus — always the mid blue, never a browser default. */
  --yd-focus-ring:0 0 0 3px rgba(56,73,166,.32);
  --yd-focus-ring-inverse:0 0 0 3px rgba(255,208,54,.55);
}