/* FitBuddy imagery, Spotter direction. Real rooms, real people.
   Full-bleed to the frame it lives in. Text over photography always sits on a
   gradient, never a flat box. One grade holds phone-shot and studio-shot
   together. No illustration, no 3D, no generated imagery. */
:root {
  /* Protection gradients, always a gradient, never a flat scrim block.
     Ground is the Spotter canvas (10,12,16), not a neutral black. */
  /* The mid stop was 0.30 at 44%, which protected the last line of a caption
     and left the line above it on bare photograph. Measured over a blown-out
     sky, an 11px overline came back at 2.97:1. Deepening the middle and
     letting the fade finish higher covers the whole caption band, and still
     reads as a gradient rather than the flat block the rule forbids. */
  --scrim-bottom: linear-gradient(to top,
    rgba(10,12,16,0.94) 0%, rgba(10,12,16,0.42) 46%, rgba(10,12,16,0) 78%);
  --scrim-top: linear-gradient(to bottom,
    rgba(10,12,16,0.72) 0%, rgba(10,12,16,0.30) 42%, rgba(10,12,16,0) 78%);
  --scrim-full: linear-gradient(to top,
    rgba(10,12,16,0.98) 0%, rgba(10,12,16,0.34) 50%, rgba(10,12,16,0.50) 100%);
  --scrim-edge: radial-gradient(120% 90% at 50% 40%,
    rgba(10,12,16,0) 42%, rgba(10,12,16,0.44) 100%);
  /* Shorter fade, for media pasted inside a message bubble */
  --scrim-msg: linear-gradient(to top,
    rgba(10,12,16,0.86) 0%, rgba(10,12,16,0) 56%);

  /* Colour grade so mixed sources cohere: a breath of i-Fitness red up top,
     a cool cast in the shadows. */
  --grade-warm: linear-gradient(180deg,
    rgba(246,12,1,0.10) 0%, transparent 46%, rgba(30,40,70,0.18) 100%);
  --grade-steel: linear-gradient(180deg,
    rgba(30,40,70,0.14) 0%, rgba(10,12,16,0.20) 100%);
  --grade-filter: saturate(1.03) contrast(1.02);

  /* Fine film grain, laid over hero media at 8% */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='72' height='72' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --grain-opacity: 0.08;

  /* Aspect ratios used across the system */
  --ar-feed: 4 / 5;
  --ar-story: 9 / 16;
  --ar-tile: 1 / 1;
  --ar-wide: 16 / 9;
  --ar-hero: 3 / 4;

  --blur-glass: 20px;
  --blur-scrim: 3px;

  /* Placeholder for media the brand hasn't shot yet.
     Honest, and never an SVG dumbbell. */
  --placeholder-stripe: repeating-linear-gradient(135deg,
    rgba(140,147,159,0.18) 0 2px, transparent 2px 9px);
}