/* scrimpl brand tokens.
   Calm, editorial, mostly white: warm ivory paper and ink neutrals (after anthropic.com), ONE accent, the logo's pink
   (--pink), for the primary action, emphasis and the selection ([r14-pink] 2026-10-08: the selection was blue; the app
   is all pink now). Flat: tone and hairlines.
   Type: Geist. Pages link /fonts/geist/geist.css for its @font-face rules (the old Monoglyphic
   file stays in /brand/fonts/ but nothing loads it any more). */

:root {
  /* Ink and paper */
  --ink: #141413; /* text, headings, the wordmark */
  --ink-2: #3d3d3a; /* secondary text on paper */
  --muted: #87867f; /* helper text, inactive */
  --faint: #b0aea5; /* placeholders, disabled */
  --paper: #ffffff; /* the app canvas and cards: the owner wants it mostly white */
  --paper-2: #faf9f5; /* ivory: page background, quiet panels */
  --paper-3: #f0eee6; /* parchment: grouped panels, hover fills */
  --oat: #e3dacc; /* deep warm surface (rare) */
  --line: #e8e6dc; /* hairlines */
  --line-2: #cccbc8; /* stronger dividers, outlined controls */

  /* The one accent: the logo's corner and its screenshot flash (public/brand/logo.js PINK). In the app (~10 %): the
     primary buttons wear a deeper pink gradient for white text (app.css --pink-a/--pink-b); emphasis and focus rings use
     this pink; selection (corners, outlines, selected fills) uses the AA pink below (app.css --accent). */
  --pink: #EC3D8E;
  --pink-fill: #d42c7b; /* selection and pink fills with white words: 4.7:1 both ways */
  --pink-fill-hover: #c31c68; /* hover / pressed */
  --pink-tint: #fdeef5; /* selection fills, focus wash */
  --on-color: #ffffff; /* words on a pink fill */

  /* Status (only where meaning needs it) */
  --ok: #2f7d4f;
  --warn: #b7791f;
  --bad: #c2412d;

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; /* everything */
  --font-mono: var(--font-sans); /* the old name for headings, labels and buttons: the same face now (Medium / Bold) */
  --font-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; /* real code only */

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px; /* cards */

  /* Motion: expo out, no overshoot, no idle wobble */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The signature: viewfinder corners (four L brackets) instead of a full outline, for selection and highlights. */
.vf-corners {
  --vf: var(--accent, var(--pink-fill)); /* [r14-pink] the selection pink (was blue) */
  --vf-len: 10px;
  --vf-w: 2px;
  background:
    linear-gradient(var(--vf), var(--vf)) top left / var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf), var(--vf)) top left / var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf), var(--vf)) top right / var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf), var(--vf)) top right / var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf), var(--vf)) bottom left / var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf), var(--vf)) bottom left / var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf), var(--vf)) bottom right / var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf), var(--vf)) bottom right / var(--vf-w) var(--vf-len);
  background-repeat: no-repeat;
}