/* ╔════════════════════════════════════════════════════════════════════════╗
   ║               **  must be placed AFTER the main style **               ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

:root {
  --bg:           #1c1c1e;
  --text:         #f0f0f0;
  --box-bg:       #2c2c2e;
  --shadow:       rgba(0, 0, 0, 0.6);
  --border:       #ccc;
  --ribbon-bg:    #e63946;   /* red = light mode default */
  --page-gap:     1rem;
  --frame-radius: 30px;
  --frame-border: 4px;
}

/* dark mode : ribbon colour switches to blue */
@media (prefers-color-scheme: dark) {
  :root {
    --ribbon-bg: #0a84ff;
  }
}

/* light mode : keep dark mode theme */
@media (prefers-color-scheme: light) {
  .svg-asset {
    --color1: #FFF;
    --color2: #111;
  }
}