/* ============================================================
   THE SYD — EFFECTS: radii, borders, shadows, motion
   The brand is crisp and architectural: thin hairline rules,
   square-ish corners, restrained shadows. The "frame" motif
   (logo lockup) shows up as 1px outlines around content.
   ============================================================ */

:root {
  /* ---- Corner radii (minimal — the brand skews square) ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hair:  1px;
  --border-thin:  1.5px;
  --border-thick: 2px;

  /* ---- Shadows (soft, warm-neutral — never harsh black) ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(14, 42, 75, 0.06);
  --shadow-md:   0 6px 20px rgba(14, 42, 75, 0.08);
  --shadow-lg:   0 18px 48px rgba(14, 42, 75, 0.12);
  --shadow-hover:0 22px 56px rgba(14, 42, 75, 0.16);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-normal: 240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 2px;
  --focus-offset: 2px;
}