/* ============================================================================
   TOKENS
   Every colour, typeface, spacing value and timing used anywhere on the site.
   Change a value here once and it updates on every page.

   Nothing in this file selects an element. It only declares variables.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --bg:                rgb(10, 10, 10);   /* page background                 */
  --surface:           rgb(14, 14, 14);   /* card / compare-box background   */
  --surface-raised:    rgb(18, 18, 18);   /* "before" pane behind the slider */

  /* --- Accent ----------------------------------------------------------- */
  --accent:            rgb(255, 108, 108);
  --accent-soft:       rgba(255, 108, 108, 0.85);  /* caption eyebrow        */
  --accent-line:       rgba(255, 108, 108, 0.5);   /* idle button border     */
  --accent-ink:        rgb(10, 10, 10);            /* text on accent fill    */

  /* --- Text ------------------------------------------------------------- */
  --text:              rgb(255, 255, 255);
  --text-dim:          rgba(255, 255, 255, 0.55);  /* body copy              */
  --text-muted:        rgba(255, 255, 255, 0.5);   /* LUT descriptions       */
  --text-faint:        rgba(255, 255, 255, 0.35);  /* labels, counters       */
  --text-ghost:        rgba(255, 255, 255, 0.3);   /* placeholder text       */
  --text-overlay:      rgba(255, 255, 255, 0.75);  /* text sitting on images */

  /* --- Lines and edges -------------------------------------------------- */
  --line:              rgba(255, 255, 255, 0.12);
  --line-strong:       rgba(255, 255, 255, 0.25);
  --line-bright:       rgba(255, 255, 255, 0.9);   /* compare-slider handle  */

  /* --- Typography ------------------------------------------------------- */
  --font-display:      Linebeam, "gill sans", sans-serif;
  --font-body:         "gill sans", system-ui, sans-serif;
  --font-mono:         ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The plain UI sans from your draft. Used for the frame caption, which
     reads better large and non-monospaced than the mono label style does. */
  --font-caption:      system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --label-size:        0.75rem;
  --label-tracking:    0.18em;

  /* --- Layout ----------------------------------------------------------- */
  --content-max:       1500px;  /* pages override this on .page if needed    */
  --gutter:            6vmin;
  --radius-card:       18px;    /* rounded photo corners                     */   /* horizontal page padding                   */

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --transition-ui:     250ms ease;   /* buttons, links, hover states         */

  /* --- Depth ------------------------------------------------------------ */
  /* Two soft layers rather than one hard drop. Reads as a lit object sitting
     just above the background instead of a flat rectangle pasted on it. */
  --shadow-card:       0 10px 20px rgba(0, 0, 0, 0.35), 0 6px 6px rgba(0, 0, 0, 0.2);
  --shadow-lightbox:   0 30px 80px rgba(0, 0, 0, 0.7);
  --shadow-text:       0 1px 6px rgba(0, 0, 0, 0.8);

  /* --- The ✖ wallpaper --------------------------------------------------
     Swap the glyph between the <text> tags to change the pattern.
     opacity='0.03' controls how visible it is.                             */
  --pattern-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='50px'><text x='0' y='15' fill='white' opacity='0.03' font-size='20'>✖</text></svg>");
  --pattern-size: 5vmin 5vmin;

  /* --- Diagonal stripes shown while an image is missing or loading ------ */
  --stripes:        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 20px);
  --stripes-strong: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 10px, transparent 10px 20px);
}