/* =====================================================================
   THEME — edit this file to change the look of the whole site.
   There are two palettes: LIGHT (the default) and DARK (goth red/black).
   The toggle button in the header switches between them.
   Every colour, the font and the corner rounding live here.
   Change a value, save, refresh. Nothing else needs touching.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SHARED — shape and type, the same in both modes
   --------------------------------------------------------------------- */
:root {
  --radius:         12px;      /* cards, sidebar, panels */
  --radius-sm:      10px;      /* buttons, inputs        */
  --logo-radius:    14px;      /* corner rounding of the logo image (0 = square) */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font); /* try: "Palatino Linotype", Palatino, Georgia, serif  for a gothic look */
}

/* ---------------------------------------------------------------------
   LIGHT MODE
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Page & surfaces */
  --bg-page:        #fbfbfe;   /* main page background (almost white)          */
  --bg-card:        #ffffff;   /* header, cards, sidebar, inputs, footer       */
  --bg-subtle:      #ece8f7;   /* placeholder behind thumbnails while loading  */
  --page-glow:      none;      /* optional glow at the top of the page         */

  /* Text */
  --text:           #17141f;   /* headings, stream names, nav                  */
  --text-body:      #2b2738;   /* paragraphs on About / DMCA / 2257 / SEO copy */
  --text-muted:     #625d75;   /* small print: followers, locations, counts    */

  /* Lines */
  --border:         #e7e4f1;   /* card / header / footer outlines              */
  --border-strong:  #cfc9e2;   /* inputs, buttons, hover outlines              */

  /* Brand accent (buttons, links, selected tag) */
  --accent:         #6d28d9;   /* button and selected-tag background           */
  --accent-hover:   #5b21b6;   /* button hover                                 */
  --accent-tint:    #f3edff;   /* very light wash: nav highlight, hovered tag  */
  --on-accent:      #ffffff;   /* text sitting on the accent colour            */
  --on-accent-soft: #e4d7ff;   /* small counts sitting on the accent colour    */
  --accent-text:    #6d28d9;   /* colour used for link and tag TEXT            */
  --accent-text-hover: #5b21b6;
  --focus-ring:     #a78bfa;   /* keyboard focus outline                       */


  /* Header bar (same dark bar in both modes) */
  --header-bg:      #17111d;   /* header bar background                        */
  --header-border:  #2b2236;   /* thin line under the header                   */
  --header-text:    #f3eef8;   /* nav links and toggle icon                    */
  --header-hover-bg: rgba(255, 255, 255, .10);   /* nav link hover             */
  --header-active-bg: rgba(167, 139, 250, .20);  /* current page highlight     */
  --header-active-text: #d8c5ff;                 /* current page text          */
  --header-control-border: #4a3d5c;              /* outline of the toggle button */

  /* Badges on thumbnails */
  --badge-live:     #d9187f;   --on-badge-live: #ffffff;
  --badge-new:      #67e8f9;   --on-badge-new:  #063a45;
  --badge-hd:       #17141f;   --on-badge-hd:   #ffffff;
  --overlay:        rgba(23, 20, 31, .78);  /* "1,234 watching" pill background */
  --on-overlay:     #ffffff;

  /* Video player */
  --player-bg:      #14111b;
  --on-player:      #e9e4f7;

  /* Messages */
  --notice-bg:      #fff9e8;   --notice-border: #f3d38a;  --notice-text: #5c4306;  /* template notices */
  --error-bg:       #fff5f8;   --error-border:  #f0b4c9;  --error-text:  #7a1541;  /* feed errors      */

  /* Loading placeholders & mobile menu backdrop */
  --skeleton:       #efebf8;
  --skeleton-shine: #f6f3fc;
  --scrim:          rgba(23, 20, 31, .45);
  --shadow:         rgba(0, 0, 0, .25);    /* mobile tag panel shadow */
}

/* ---------------------------------------------------------------------
   DARK MODE — black and blood red
   --------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;        /* dark dropdowns, inputs and scrollbars */

  /* Page & surfaces */
  --bg-page:        #0b0809;   /* warm black                                   */
  --bg-card:        #150d10;
  --bg-subtle:      #1d1216;
  --page-glow:      radial-gradient(ellipse 60% 100% at 50% 0%, rgba(181, 18, 46, .20), transparent);
                             /* faint red glow at the top; set to "none" to remove */

  /* Text */
  --text:           #f2e9e6;   /* bone white                                   */
  --text-body:      #ddd0cd;
  --text-muted:     #a2949a;

  /* Lines */
  --border:         #2b171c;
  --border-strong:  #4d2229;

  /* Brand accent */
  --accent:         #b5122e;   /* crimson: button and selected-tag background  */
  --accent-hover:   #d4183a;
  --accent-tint:    #2a0d13;   /* dark red wash: nav highlight, hovered tag    */
  --on-accent:      #fff5f3;
  --on-accent-soft: #ffc2ca;
  --accent-text:    #ff5a70;   /* lighter red so link/tag text is readable     */
  --accent-text-hover: #ff8fa0;
  --focus-ring:     #ff5a70;


  /* Header bar */
  --header-bg:      #17111d;
  --header-border:  #3a1c26;
  --header-text:    #f3eef8;
  --header-hover-bg: rgba(255, 255, 255, .10);
  --header-active-bg: #2a0d13;
  --header-active-text: #ff5a70;
  --header-control-border: #4d2229;

  /* Badges on thumbnails */
  --badge-live:     #c8102e;   --on-badge-live: #ffffff;
  --badge-new:      #e8dcd6;   --on-badge-new:  #1a0c10;
  --badge-hd:       #2a1418;   --on-badge-hd:   #f2e9e6;
  --overlay:        rgba(11, 8, 9, .82);
  --on-overlay:     #f2e9e6;

  /* Video player */
  --player-bg:      #050304;
  --on-player:      #d8c8c5;

  /* Messages */
  --notice-bg:      #2a1c0c;   --notice-border: #6b4a1a;  --notice-text: #f0d49a;
  --error-bg:       #2a0d13;   --error-border:  #7a1a2c;  --error-text:  #ffb3bf;

  /* Loading placeholders & mobile menu backdrop */
  --skeleton:       #1d1216;
  --skeleton-shine: #2a181e;
  --scrim:          rgba(0, 0, 0, .65);
  --shadow:         rgba(0, 0, 0, .6);
}