/* =========================================================
   THE LONDON PIANO PRACTICE — DAY / NIGHT SYSTEM
   Automatic by local browser time:
   Day 07:00–18:59 · Night 19:00–06:59
   The header control cycles Auto → Day → Night.
   ========================================================= */

:root{
  color-scheme:light;
  --paper:#f6f2e9;
  --ink:#1c1b19;
  --red:#7A2E38;
  --red-soft:#a96f6f;
  --grey:#8c877e;
  --line:#d7d0c4;
  --soft:#eee8dc;
  --sheet:#eee9df;
  --text:#514d46;
  --beige:#ddd5c7;
  --tape:rgba(217,208,192,.68);
  --contrast-bg:#1c1b19;
  --contrast-fg:#f6f2e9;
  --contrast-muted:#c9c2b7;
  --contrast-line:rgba(246,242,233,.18);
  --cta-bg:#6d3030;
  --cta-fg:#f6f2e9;
  --cta-muted:#eaded4;
  --shadow:rgba(0,0,0,.055);
  --shadow-strong:rgba(0,0,0,.12);
  --photo-note:#f6f2e9;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#151412;
  --ink:#f2ede5;
  --red:#B8747C;
  --red-soft:#d5aaa2;
  --grey:#a9a298;
  --line:#3a3732;
  --soft:#201e1b;
  --sheet:#25221e;
  --text:#c9c2b7;
  --beige:#3b3630;
  --tape:rgba(135,123,107,.42);
  --contrast-bg:#0d0d0c;
  --contrast-fg:#f6f2e9;
  --contrast-muted:#c9c2b7;
  --contrast-line:rgba(246,242,233,.16);
  --cta-bg:#612c2c;
  --cta-fg:#f6f2e9;
  --cta-muted:#e5d8cf;
  --shadow:rgba(0,0,0,.28);
  --shadow-strong:rgba(0,0,0,.42);
  --photo-note:#f6f2e9;
}

html,body{background:var(--paper);color:var(--ink)}
body,header,section,footer,.links,.form-card,.programme,.sheet,.pathway,.portrait,.paper-study,.notebook-card,.score,.quote-card,.studio-photo img{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease;
}

/* Official logo */
.brand-logo{
  display:block;
  width:clamp(190px,17vw,248px);
  min-width:190px;
  line-height:0;
  flex:0 0 auto;
}
.brand-logo img,.footer-logo img{display:block;width:100%;height:auto}
.logo-night{display:none!important}
html[data-theme="dark"] .logo-day{display:none!important}
html[data-theme="dark"] .logo-night{display:block!important}

.footer-logo{
  display:block;
  width:min(270px,60vw);
  line-height:0;
}

/* Theme control */
.theme-toggle{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  height:36px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font:600 .58rem var(--sans);
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}
.theme-toggle:hover{border-color:var(--ink)}
.theme-icon{font-size:.9rem;line-height:1;font-family:Georgia,serif}
.theme-label{min-width:28px;text-align:left}

/* Shared day/night surfaces */
.cta,.method-cta{
  background:var(--cta-bg)!important;
  color:var(--cta-fg)!important;
}
.cta p,.method-cta p,.cta-aside{color:var(--cta-muted)!important}
.cta .btn,.method-cta .btn{border-color:var(--cta-fg)!important;color:var(--cta-fg)}
.cta .btn.dark,.method-cta .btn.dark{
  background:var(--cta-fg)!important;
  color:var(--cta-bg)!important;
}
.cta .btn.dark:hover,.method-cta .btn.dark:hover{background:var(--cta-muted)!important}

input,select,textarea{color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--grey);opacity:.8}
select option{background:var(--paper);color:var(--ink)}

.photo-note{color:var(--photo-note)!important}

/* A few deliberately reversed editorial panels stay dark in both themes. */
.visiting,
.instrument,
.performance{
  background:var(--contrast-bg)!important;
  color:var(--contrast-fg)!important;
}
.visiting p,.instrument p,.performance p,
.visiting .body,.performance-copy{
  color:var(--contrast-muted)!important;
}
.visiting .hand,.instrument .hand,.performance .hand,
.visitor .discipline,.visitor .num{
  color:var(--red-soft)!important;
}

/* Method's deliberately dark section */
.method-dark{
  background:var(--contrast-bg)!important;
  color:var(--contrast-fg)!important;
}
.method-dark .body{color:var(--contrast-muted)!important}
.method-dark .flow-box{border-color:var(--contrast-line)!important}
.method-dark .flow-item{border-color:var(--contrast-line)!important}
.method-dark .flow-box:before{background:var(--contrast-bg)!important}

/* Dark editorial blocks on the homepage / advanced pages */
section.difficulty[style*="background"]{}
html[data-theme="dark"] .studio-photo:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.16),transparent 45%);
}

/* Mobile navigation */
@media(max-width:700px){
  .brand-logo{width:165px;min-width:165px}
  .links .theme-toggle{width:100%;justify-content:center;margin-top:2px}
}
@media(prefers-reduced-motion:reduce){
  body,header,section,footer,.links,.form-card,.programme,.sheet,.pathway,.portrait,.paper-study,.notebook-card,.score,.quote-card,.studio-photo img{
    transition:none!important;
  }
}