/* ============================================================
   MESA STRATA — SPACING, RULES, RADII, MOTION
   Structured logic over decoration. No drop shadows, no glows,
   no bevels. Borders are hairline ink rules. Corners are near-
   square — this is a memo, not an app chrome.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */

  /* ---- Layout ---- */
  --page-margin:    8%;        /* generous editorial margin (7–9%) */
  --measure:        68ch;      /* body line length */
  --measure-narrow: 46ch;

  /* ---- Rule weights ---- */
  --rule-weight-hair:  1px;    /* hairline dividers + title rule */
  --rule-weight-plate: 3px;    /* plateau accent rules */
  --rule-weight-diagram: 1.5px;/* diagrams */

  /* ---- Radii — austere. Near-square; small radius only where a
         control must read as interactive. No pills on surfaces. ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-control: 2px;

  /* ---- Motion — restrained. Quiet authority, no bounce. ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);    /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   260ms; /* @kind other */

  /* ---- Plateau device proportions (short crown / broad base) ---- */
  --plateau-crown: 34%;   /* top rule width relative to base */
  --plateau-base:  100%;  /* bottom rule width */
}

/* The only permitted texture: a faint flat paper grain on bone.
   Applied as an opt-in utility — extremely subtle, no effect-y feel. */
.ms-grain {
  position: relative;
}
.ms-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}