/* ============================================================
   Known For — Effects: radius, borders, shadow, motion
   The brand leans on HAIRLINE BORDERS, not shadow. Surfaces are
   mostly flat. Shadow is reserved for genuinely floating UI
   (dialogs, menus, toasts). Corners are gently rounded; buttons
   are nearly square.
   ============================================================ */

:root {
  /* ---- Radius ---- */
  --radius-xs:  3px;    /* buttons, inputs — nearly square */
  --radius-sm:  6px;    /* chips, small controls */
  --radius-md:  10px;   /* icon tiles, badges */
  --radius-lg:  14px;   /* cards */
  --radius-xl:  18px;   /* feature / quote cards */
  --radius-2xl: 24px;
  --radius-pill:999px;  /* tags, pills */
  --radius-round:50%;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--line);
  --border-strong:   1px solid var(--line-strong);
  --border-dashed:   1px dashed var(--line-dashed);
  --border-on-dark:  1px solid var(--line-on-dark);
  --border-accent:   1px solid var(--gold-600);

  /* ---- Shadow (soft, warm, low) ---- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(19, 18, 17, 0.04);
  --shadow-sm:   0 2px 8px rgba(19, 18, 17, 0.05);
  --shadow-md:   0 8px 24px rgba(19, 18, 17, 0.08);
  --shadow-lg:   0 18px 48px rgba(19, 18, 17, 0.12);
  --shadow-focus:0 0 0 3px rgba(176, 133, 58, 0.32);  /* gold focus halo */

  /* ---- Accent rules / dividers ---- */
  --rule-gold: 2px solid var(--gold-600);   /* short gold divider */
  --rule-len:  44px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0.05, 0.36, 1);  /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
  --dur-reveal: 720ms;  /* @kind other */

  /* ---- Backdrop blur (used sparingly: sticky nav over content) ---- */
  --blur-nav: saturate(140%) blur(10px);  /* @kind other */
}

/* Calm, deliberate transitions are the house style.
   Hover = subtle darken / lift; press = slight shrink.
   Never bounce. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;   /* @kind other */
    --dur-base: 0ms;   /* @kind other */
    --dur-slow: 0ms;   /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
  }
}