/* ============================================================
   SANDRA — Design tokens
   "Galerie vivante": museum structure + warmth of the pieces
   ============================================================ */

:root {
  /* Brand colors — pulled from the ceramic pieces */
  --turquoise: #7fb5a8;   /* openwork bowl — primary accent */
  --amber: #d4a853;       /* lantern glow — light effects, hover states */
  --sienna: #a0522d;      /* glazes — secondary warm accent */
  --red: #c23b22;         /* CTA only */

  /* Backgrounds */
  --bg: #18171a;
  --bg-2: #1d1c1f;
  --bg-warm: #1f1c19;     /* contact section warmth */

  /* Text */
  --ink: #eceaea;
  --ink-soft: rgba(236, 234, 234, 0.6);
  --ink-faint: rgba(236, 234, 234, 0.32);
  --white: #f6f4f2;

  /* Functional accents */
  --accent: var(--turquoise);   /* primary: kickers, labels, em italic */
  --accent-2: var(--amber);     /* secondary: subtitles, lede, glow */
  --rule: rgba(236, 234, 234, 0.12);

  /* Typography */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 90px);
  --s-section: clamp(90px, 16vh, 180px);  /* vertical breathing for grid sections */
  --s-gap: clamp(40px, 7vh, 80px);        /* copy → media gap within a section */

  /* Media filters — galerie: no radius, slight desat */
  --media-radius: 0px;
  --media-contrast: 1;
  --media-bright: 1;
  --media-sat: 0.92;

  --ease: cubic-bezier(.22, .61, .36, 1);
}