/* =========================================================================
   THE KOFFEE-WITH-KARAN KIT.

   One theme, strongly. Every variation is built from this kit so the
   reference lands before a word is read. The signals, in order of how fast
   they register:
     1. the mustard-gold set  (the show's most recognisable single cue)
     2. two cups side by side (two guests; the "Koffee" in the title)
     3. the two-seater couch  (both guests on one sofa, the format itself)
     4. espresso ink on gold, cream for the furniture
     5. a deep teal accent, used once per frame

   A NOTE ON RIGHTS: this evokes a chat-show set. It does not reproduce the
   show's logo, wordmark or trade dress, and nothing here implies endorsement.
   Fine for an organic post; flag it before putting money behind it.
   ========================================================================= */

:root {
  /* ---- the set ---- */
  --gold:        #DFA32C;   /* the set wall */
  --gold-lit:    #EBBA4E;   /* where the set lights hit */
  --gold-deep:   #B87F1B;   /* the floor, and shadow on gold */
  --cream:       #F9F1E0;   /* the couch, the cups, the saucers */
  --cream-dim:   #EADFC6;   /* the couch's shaded planes */
  --espresso:    #2A1A12;   /* all primary type, and the coffee itself */
  --espresso-soft: rgba(42, 26, 18, .70);
  --espresso-faint: rgba(42, 26, 18, .46);
  --teal:        #0F5A55;   /* the one accent, once per frame */
  --teal-ink:    #F4E3BC;

  /* ---- the one shared texture ----
     220px stitched feTurbulence tile, verbatim from
     letters-series/base.css:49. soft-light at .16 on the saturated grounds,
     multiply at .085 on the cream ones. This is what keeps a flat mustard
     from reading as a digital fill. */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- 9:16 geometry ---- */
  --live-top: 384px;    /* top fifth: IG profile + close chrome   */
  --live-bot: 1536px;   /* bottom fifth: caption, audio, CTA      */
  --gut: 96px;
  --rail: 180px;        /* Reels action buttons, below y 1100     */
  --grid-crop: 1350px;  /* 4:5 profile-grid crop, from the top    */
}