/* ============================================================
   THEME — Canon Variable System (Day + HDR Black Night)
   All components inherit ONLY these variables.
   ============================================================ */

/* ------------------------------------------------------------
   DAY MODE (DEFAULT)
   ------------------------------------------------------------ */
:root {
  /* Base page colours */
  --bg-color: #ffffff;
  --text-color: #111111;

  /* Nav glass (day) */
  --nav-bg: rgba(255, 255, 255, 0.55);
  --nav-border: rgba(0, 0, 0, 0.12);

  /* Hamburger lines (day) */
  --hamburger-line: #111111;

  /* Search glass (day) */
  --search-glass-bg: rgba(255, 255, 255, 0.55);
  --search-glass-border: rgba(255, 255, 255, 0.35);
  --search-glass-shadow: rgba(0, 0, 0, 0.22);
  --search-glass-inset: rgba(255, 255, 255, 0.70);

  /* Future-friendly variables */
  --card-bg: rgba(255,255,255,0.45);
  --card-border: rgba(0,0,0,0.12);

  /* Icon tint */
  --icon-color: var(--text-color);
}

/* ------------------------------------------------------------
   NIGHT MODE (HDR BLACK — Canon)
   ------------------------------------------------------------ */
/* -------------------------------------------
   NIGHT MODE OVERRIDES (HTML + BODY)
   Ensures Safari overscroll never flashes white
   ------------------------------------------- */
html.night,
body.night {
  --bg-color: #000000;
  --text-color: #f5f5f7;

  /* Nav glass (night — HDR smoky grey-black) */
  --nav-bg: rgba(10, 10, 10, 0.80);
  --nav-border: rgba(255, 255, 255, 0.10);

  /* Hamburger lines (night) */
  --hamburger-line: #ffffff;

  /* Search glass (night) */
  --search-glass-bg: rgba(18, 18, 18, 0.55);
  --search-glass-border: rgba(255, 255, 255, 0.18);
  --search-glass-shadow: rgba(0, 0, 0, 0.55);
  --search-glass-inset: rgba(255, 255, 255, 0.12);

  /* Future-friendly card presets */
  --card-bg: rgba(18,18,18,0.55);
  --card-border: rgba(255,255,255,0.10);

  /* Icons follow text colour */
  --icon-color: var(--text-color);
}

/* ------------------------------------------------------------
   APPLY COLOURS TO PAGE ROOT
   ------------------------------------------------------------ */
html,
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.25s ease, color 0.25s ease;
}

/* Media glass tuning — DAY */
body.day {
  --media-glass-bg: rgba(255, 255, 255, 0.40);
  --media-glass-border: rgba(0, 0, 0, 0.14);
  --media-glass-shadow: rgba(0, 0, 0, 0.10);

  --media-icon-color: #111111;
  --media-icon-muted: rgba(0, 0, 0, 0.45);

  --media-progress-track: rgba(0, 0, 0, 0.10);
  --media-progress-buffer: rgba(0, 0, 0, 0.22);
  --media-progress-fill: #111111;

  --media-time-color: rgba(0, 0, 0, 0.80);
}

/* Media glass tuning — NIGHT (true HDR) */
body.night {
  --media-glass-bg: rgba(11, 11, 11, 0.82);
  --media-glass-border: rgba(255, 255, 255, 0.14);
  --media-glass-shadow: rgba(0, 0, 0, 0.85);

  --media-icon-color: #f5f5f5;
  --media-icon-muted: rgba(245, 245, 245, 0.50);

  --media-progress-track: rgba(255, 255, 255, 0.12);
  --media-progress-buffer: rgba(255, 255, 255, 0.28);
  --media-progress-fill: #f5f5f5;

  --media-time-color: rgba(245, 245, 245, 0.85);
}

/* ============================================================
   MEDIA UI — FORCE SVG ICONS TO USE THEME TEXT COLOUR
   ============================================================ */

.custom-player .control-button .icon,
.custom-player .control-button.use,
.custom-player .control-button svg use {
  fill: currentColor !important;
  color: var(--text-color) !important;
}

/* iOS Safari fix: prevent blue "tap highlight tint" */
.custom-player .control-button svg {
  color: inherit !important;
  fill: inherit !important;
  stroke: none !important;
}

/* ============================================================
   THEME-AWARE HDR BADGE — FINAL CANON
   Applies to both video and audio players
============================================================ */

/* NIGHT MODE (default) */
.hdr-badge {
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* DAY MODE */
body.day .hdr-badge {
  background: rgba(255, 255, 255, 0.75);
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
/* ============================================================
   UNIVERSAL THEME-AWARE HDR BADGE — AUDIO + VIDEO
   ============================================================ */

/* NIGHT MODE (default) */
.hdr-badge {
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* DAY MODE */
body.day .hdr-badge {
  background: rgba(255, 255, 255, 0.75);
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}