/* ============================================================
   BloomPlayer — Theme File: Misty Sage & Ink Black
   Matches the organic, greenish background mockup exactly.
   ============================================================ */

:root {
  /* ── PRIMARY ACTIONS (Golden Ochre) ── */
  /* Matches the "Watch" button and the Lotus Logo */
  --red:                #CC9544;   
  --red-dark:           #B37E36;   
  --red-light:          #F5EAE6;   

  /* ── PAGE SURFACES (Misty Sage Tint) ── */
  /* This provides that distinct greenish-grey background */
  --bg:                 #C2CDC2;   /* Deepened Misty Sage Base */
  --card:               #D6DDD6;   /* Muted Mint surface */
  --card2:              #E2E8E2;   /* Highlighted surface for hero cards */
  --border:             #A9B5A9;   /* Organic Sage divider */

  /* ── MAXIMUM READABILITY TEXT (INK BLACK) ── */
  --text:               #000000;   /* Primary Headers */
  --text-2:             #000000;   /* Instructions & Body */
  --text-3:             #000000;   /* Metadata & Captions */

  /* ── SECONDARY ACCENT (Sage Green) ── */
  /* Used for filters and the "Educational" pills */
  --accent:             #7A9A88;   /* Darker Sage for readability */
  --accent-text:        #FFFFFF;   /* White text on Sage pills */

  /* ── MISC SURFACES ── */
  --badge-bg:           #B5C0B5;   
  --video-bg:           #000000;   
  --input-bg:           #E2E8E2;   

  /* ── THE "CLOUD" SHADOW ── */
  /* Soft, organic depth as seen in the mockup */
  --shadow:             0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 20px 40px -10px rgba(0, 0, 0, 0.04);
  --radius:             14px;
  --radius-lg:          32px;      

  /* ── INFO / PARENT BOX ── */
  --info-bg:            #D6DDD6;
  --info-border:        #A9B5A9;
  --info-text:          #000000;

  /* ── VIDEO CARDS ── */
  --video-card-bg:      #FDFCFA; 
  --video-card-border:  #D1D9D1;
  --video-card-radius:  24px;

  /* ── PLAYER SCREEN ── */
  --player-bg:          #121110;
  --player-btn-bg:      #1C1A18;
  --player-btn-border:  #3A3733;
}

/* ── UI SPECIFIC OVERRIDES ── */

/* Force all instructions and secondary text to stay Bold Black */
.brand-tag, .input-desc, .parent-note {
    font-style: italic;
    color: #000000 !important;
    font-weight: 500;
}