/* ============================================================
   RYNA · EFFECTS — radius, borders, shadow, motion
   Restrained. Soft 6–10px radii, hairline borders, low-spread
   shadows. Gold is the only "glow". Motion is calm: short fades
   and small lifts, never bounce.
   ============================================================ */
:root {
  /* —— Radius —— */
  --radius-xs:   4px;  /* chips, small buttons, labels */
  --radius-sm:   6px;  /* inputs, swatches */
  --radius-md:   8px;  /* cards, panels — the default */
  --radius-lg:   10px; /* hero panels, modals */
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* —— Borders —— */
  --border-hair:   1px solid var(--border-default);
  --border-strong: 1px solid var(--border-strong);
  --border-dash:   1px dashed rgba(207,161,90,0.4); /* clear-space guides @kind other */
  --border-navy:   1px solid var(--border-on-navy);

  /* —— Shadows (cool navy-tinted, low spread) —— */
  --shadow-xs:  0 1px 0 rgba(16,31,60,0.06);
  --shadow-sm:  0 1px 2px rgba(16,31,60,0.06), 0 1px 1px rgba(16,31,60,0.04);
  --shadow-md:  0 4px 14px rgba(16,31,60,0.08), 0 1px 3px rgba(16,31,60,0.05);
  --shadow-lg:  0 18px 48px rgba(11,23,48,0.16), 0 4px 12px rgba(11,23,48,0.08);
  --shadow-navy:0 24px 60px rgba(8,16,29,0.45); /* dark surfaces over light */

  /* —— Gold focus / accent glow —— */
  --glow-gold:  0 0 0 3px var(--focus-ring);

  /* —— Motion —— */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  --transition-base: all var(--dur) var(--ease-out); /* @kind other */
}