/* ============================================================
   Roky — Spacing, radii, borders, layout
   8px spacing grid. Generous section padding (~80px). Consistent
   small radii. Depth comes from surface alternation + media
   contrast + 1px hairlines + rounded corners — NO drop shadows.
   ============================================================ */

:root {
  /* --- 8px spacing scale ----------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  2.5rem;   /* 40px */
  --space-8:  3rem;     /* 48px */
  --space-9:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px — section padding */
  --space-11: 7.5rem;   /* 120px — large whitespace interval */
  --space-12: 10rem;    /* 160px */

  /* --- Radii ----------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;    /* buttons, pills, small media */
  --radius-md:   12px;   /* cards */
  --radius-lg:   16px;   /* large media cards */
  --radius-xl:   22px;   /* hero / feature media — visible corners */
  --radius-pill: 999px;

  /* --- Borders / hairlines --------------------------------- */
  --border-hairline:  1px solid var(--hairline);
  --border-strong:    1px solid var(--hairline-strong);
  --border-ember:     1px solid var(--hairline-ember);
  --border-on-dark:   1px solid var(--hairline-on-dark);
  --rule-ember:       2px;   /* signature thin Ember hairline weight */

  /* --- Layout ---------------------------------------------- */
  --container-max:    1280px;
  --container-narrow: 860px;
  --section-pad-y:    var(--space-10);
  --section-pad-x:    var(--space-8);
  --gutter:           var(--space-6);

  /* --- Motion (restrained: fades + short eases, no bounce) - */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);    /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */

  /* NO drop shadows by default. A single ambient shadow token
     exists only for transient overlays (dialog, toast). */
  --shadow-overlay: 0 16px 48px rgba(30, 28, 24, 0.18);
}