/* =====================================================================
   Contact · design tokens
   The photographer. Light is "Proof" (proof-paper white, ink black);
   dark is "Darkroom" (black, warm, under a safelight). There is no
   coloured text: the one colour is --marker, the yellow china marker
   that circles favourites and highlights the promise (always under ink
   text). --safelight is the darkroom's red glow: decoration only.
   --tone-* are the greys the frames are printed in.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f5f4f0;
  --card: #ffffff;
  --well: #ebe9e3;
  --line: #d8d5cc;
  --ink: #141414;
  --ink-2: #3a3a38;
  --muted: #5d5c58;
  --marker: #f5c400;
  --on-marker: #141414;
  --safelight: #c2301f;
  --focus: #141414;
  --shadow-card: 0 1px 0 rgba(20, 20, 20, 0.05), 0 18px 34px -24px rgba(20, 20, 20, 0.45);
  --shadow-lift: 0 34px 64px -30px rgba(20, 20, 20, 0.5);

  --film: #1b1916;                    /* the strip's rebate */
  --edge: #e9b35c;                    /* edge print on the strip */
  --tone-1: #f0ede6;
  --tone-2: #cfcac0;
  --tone-3: #a8a296;
  --tone-4: #7d776c;
  --tone-5: #514c44;
  --tone-6: #2a2723;

  --display: "Gilda Display", "Didot", Georgia, serif;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(46px, 6.6vw, 104px);
  --fs-h2: clamp(34px, 4.4vw, 64px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 11.5px;

  --wrap: 1240px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 2px;
  --r-m: 4px;
  --r-l: 6px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 320ms;
  --d-slow: 1600ms;
}

/* ---------- Darkroom ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e0b0a;
    --card: #181311;
    --well: #130f0e;
    --line: #33291f;
    --ink: #efe7df;
    --ink-2: #d2c7bc;
    --muted: #a89d93;
    --marker: #ffcf33;
    --on-marker: #141414;
    --safelight: #ff6a4d;
    --focus: #efe7df;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 34px -22px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 34px 64px -28px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e0b0a;
  --card: #181311;
  --well: #130f0e;
  --line: #33291f;
  --ink: #efe7df;
  --ink-2: #d2c7bc;
  --muted: #a89d93;
  --marker: #ffcf33;
  --on-marker: #141414;
  --safelight: #ff6a4d;
  --focus: #efe7df;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 34px -22px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 34px 64px -28px rgba(0, 0, 0, 0.9);
}