/* ===========================================================================
   roastynote — Spacing, radii, borders, shadows, motion, layout
   ---------------------------------------------------------------------------
   Quiet & architectural: near-square radii, hairline borders over heavy
   shadows, slow easing. Spacing is an 8px-based rhythm with a few halves.
   =========================================================================== */

:root {
  /* ---- Spacing scale (8px rhythm) -------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;

  /* Layout rhythm */
  --page-margin:   clamp(20px, 5vw, 80px);   /* outer gutter */
  --grid-gutter:   24px;                      /* 12-col gutter */
  --section-gap:   clamp(64px, 12vw, 192px);  /* vertical section rhythm */
  --max-content:   1440px;                    /* max line of layout */
  --measure:       66ch;                      /* readable prose width */

  /* ---- Radii (minimal — the brand barely rounds) ----------------------- */
  --radius-none: 0px;
  --radius-xs:   2px;   /* inputs, chips */
  --radius-sm:   4px;   /* buttons, cards */
  --radius-md:   8px;   /* media, dialogs */
  --radius-pill: 999px; /* rare — toggles, avatars */

  /* ---- Borders --------------------------------------------------------- */
  --border-width:      1px;
  --border-width-bold: 1.5px;

  /* ---- Shadows (soft, warm, sparing) ----------------------------------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-md:   0 4px 16px color-mix(in oklab, var(--ink) 10%, transparent);
  --shadow-lg:   0 18px 48px color-mix(in oklab, var(--ink) 16%, transparent);
  /* Inset hairline used on raised cream cards instead of a drop shadow */
  --shadow-inset-hairline: inset 0 0 0 1px color-mix(in oklab, var(--espresso) 10%, transparent);

  /* ---- Motion (slow, considered) --------------------------------------- */
  --ease-alpha:    cubic-bezier(0.25, 0.46, 0.45, 0.9); /* @kind other */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:      0.35s; /* @kind other */
  --dur-normal:    0.45s; /* @kind other */
  --dur-smooth:    0.7s; /* @kind other */

  /* ---- Z-index --------------------------------------------------------- */
  --z-widget:     9; /* @kind other */
  --z-header:     10; /* @kind other */
  --z-overlay:    40; /* @kind other */
  --z-modal:      50; /* @kind other */
  --z-toast:      60; /* @kind other */
}