/* Light theme: "daylight". Same layout, warm paper instead of night sky; the lamp becomes deep amber.
   Token names in site.css are kept (--night is still the page background), only their values change. */
:root[data-theme="light"] {
  --night: #f7f2e7;     /* page */
  --night-2: #efe8d8;   /* alternate sections */
  --night-3: #fffdf8;   /* raised surfaces: player, cards, results */
  --line: #d9cfb8;
  --moon: #1c2431;      /* ink */
  --moon-dim: #566173;
  --lamp: #9a5504;      /* 5:1 on the page, so it works for small links as well as fills */
  --lamp-deep: #7d4503;
  --sage: #2c7461;
  color-scheme: light;
}

/* hard-coded colours in site.css and the page stylesheets */
[data-theme="light"] .btn:hover,
[data-theme="light"] .ap .abtn:hover,
[data-theme="light"] .rd .rbtn:hover { background: var(--lamp-deep); }
[data-theme="light"] .row li a:hover,
[data-theme="light"] .tracks li:hover { color: var(--moon); }
[data-theme="light"] .hits mark { background: rgba(154, 85, 4, .18); }
[data-theme="light"] .player,
[data-theme="light"] .results,
[data-theme="light"] .ios-help { box-shadow: 0 14px 34px -16px rgba(70, 45, 10, .28); }

/* hero: the stars are invisible on paper */
[data-theme="light"] #stars { display: none; }

/* book reader: pages sit on a darker sheet of paper, not a black table */
[data-theme="light"] .rd .table { background: #e6dec9; }
[data-theme="light"] .rd .page { box-shadow: 0 18px 40px -22px rgba(70, 45, 10, .5); }

/* glass: frosted paper instead of frosted night */
[data-theme="light"] .glass {
  --glass-line: rgba(28, 36, 49, 0.12);
  --glass-top: rgba(255, 255, 255, 0.75);
}
[data-theme="light"] .glass .top::before { background: rgba(247, 242, 231, 0.74); }
[data-theme="light"] .glass .hero .verse { background: rgba(255, 253, 248, 0.5); }
[data-theme="light"] .glass .player { background: rgba(255, 253, 248, 0.82); }
[data-theme="light"] .glass .results { background: rgba(255, 253, 248, 0.94); }
[data-theme="light"] .glass .search input { background: rgba(255, 253, 248, 0.75); }
[data-theme="light"] .glass.ap .dock { background: rgba(255, 253, 248, 0.9); }
[data-theme="light"] .glass .rd .rbar { background: rgba(255, 253, 248, 0.88); }
@media (max-width: 600px) {
  [data-theme="light"] .glass .top nav { background: rgba(247, 242, 231, 0.9); }
}