/* ============================================================
   7 Tones · Spacing, radii, borders, shadows, texture
   The studio's layout breathes — generous section padding, wide
   max-widths, hairline borders instead of boxes. Corners are
   nearly square (paper, not chrome). There is essentially no
   drop-shadow system; depth comes from the paper texture and
   translucency, not elevation.
   ============================================================ */

:root {
  /* ---- Spacing scale (rem-based, 1rem = 16px) ---- */
  --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 — standard gutter */
  --space-8:  4rem;      /* 64 */
  --space-9:  5rem;      /* 80 */
  --space-10: 6rem;      /* 96 — section padding */
  --space-11: 7rem;      /* 112 — large section padding */

  /* ---- Layout ---- */
  --container:        1100px;  /* default content width */
  --container-narrow: 820px;
  --container-wide:   1200px;
  --section-pad-y:    6rem;
  --section-pad-x:    3rem;

  /* ---- Radii (barely rounded — paper edges) ---- */
  --radius-none: 0;       /* fields, cards, image wells */
  --radius-xs:   2px;     /* buttons */
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 0.5px;          /* signature hairline */
  --border-accent-width: 1.5px;   /* left rule on text blocks */

  /* ---- Shadows (intentionally minimal) ---- */
  --shadow-none: none;
  --shadow-press: 0 1px 2px rgba(42,52,65,0.18);     /* tiny lift on dark btn */
  --shadow-text-warm: 0 1px 2px rgba(60,30,5,0.35);  /* on hand-drawn CTAs */
  --shadow-text-cool: 0 1px 2px rgba(10,50,45,0.35);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:  0.2s; /* @kind other */
  --dur-base:  0.3s; /* @kind other */
  --lift-hover: -2px;   /* buttons rise on hover */
  --lift-hover-lg: -3px;

  /* ---- Paper texture (multiply overlay) ---- */
  --texture-url: url('/assets/textures/paper-texture.jpg'); /* @kind other */
  --texture-size: 800px auto;
  --texture-opacity: 0.35; /* @kind other */
}