/* Load after the page styles. Light is the default; js/main.js restores an explicit choice. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7f3;
  --surface: #ffffff;
  --surface2: #f3ede7;
  --text: #2a1f14;
  --muted: #6a5a4a;
  --light: #70584b;
  --border: #d9cbd0;
  --rose: #b33852;
  --orange: #a5402e;
  --violet: #7b2d8b;
  --violet-soft: #f0e5f3;
  --rose-pale: #f6e8ed;
  --success: #245f40;
  --success-soft: #e2f0e7;
  --dark: #0e0b14;
  --dark2: #1a1424;
  --button-bg: #b33852;
  --button-hover: #8b253e;
  --on-accent: #ffffff;
  --control-border: #8b7182;
  --focus: #7b2d8b;
  --header-bg: rgba(250,247,243,.97);
  --shadow: 0 4px 24px rgba(42,31,20,.1);
  --shadow-lg: 0 16px 60px rgba(42,31,20,.16);
  /* Older templates use these names rather than the shared reading palette. */
  --color-accent: var(--rose);
  --accent: var(--rose);
  --color-text-muted: var(--muted);
  --creme: var(--surface);
  --encre: var(--text);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18141f;
  --surface: #211c29;
  --surface2: #2c2535;
  --text: #e9dfe9;
  --muted: #c7b9ca;
  --light: #bbaebd;
  --border: #58485f;
  --rose: #f5a3b3;
  --orange: #f4b89b;
  --violet: #d6a1e5;
  --violet-soft: #3a2b46;
  --rose-pale: #402b39;
  --success: #9bdfb8;
  --success-soft: #253c31;
  --dark: #100c17;
  --dark2: #1d1527;
  --button-bg: #b33852;
  --button-hover: #8b253e;
  --on-accent: #ffffff;
  --control-border: #a18aaa;
  --focus: #dfb4ef;
  --header-bg: rgba(24,20,31,.97);
  --shadow: 0 4px 24px rgba(0,0,0,.25);
  --shadow-lg: 0 16px 60px rgba(0,0,0,.4);
}

html,
body { background-color: var(--bg); color: var(--text); }
body { accent-color: var(--rose); }
::selection { color: var(--on-accent); background: var(--button-bg); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  color: var(--text);
  background-color: var(--surface);
  border-color: var(--control-border);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
option { color: var(--text); background: var(--surface); }

/* Keep labels readable when a pastel link accent is used in the dark theme. */
.btn-primary, .filter-btn.active, .filter-btn[aria-pressed="true"],
.filter-btn:hover, .actu-filter.is-active, .breve-action:hover,
.chronique-open, .chronique-cat, .chronique-close:hover,
.btn-outline:hover {
  color: var(--on-accent);
  background: var(--button-bg);
  border-color: var(--button-bg);
}
.btn-primary:hover { background: var(--button-hover); opacity: 1; }
.btn-outline { color: var(--rose); border-color: var(--rose); }
.btn-dark { color: #fff; background: var(--dark); border: 1px solid var(--control-border); }
.btn-ghost { color: var(--rose); background: transparent; border-color: var(--control-border); backdrop-filter: none; }
.btn-ghost:hover { color: var(--text); background: var(--violet-soft); }
.filter-btn, .actu-filter { color: var(--text); border-color: var(--control-border); }
.filter-btn.active, .filter-btn:hover { color: var(--on-accent); }

/* The shared header and mobile disclosure follow the selected reading theme. */
.header { background: var(--header-bg); border-bottom-color: var(--border); }
.header .logo-link, .header .logo-text { color: var(--text); }
.header .logo-accent { color: var(--rose); }
.header .nav-link { color: var(--muted); }
.header .nav-link:hover { color: var(--text); background: var(--violet-soft); }
.header .nav-link.nav-active, .header .nav-link[aria-current="page"] { color: var(--rose); }
.header .nav-link.nav-cta { color: var(--on-accent) !important; background: var(--button-bg) !important; }
.header .nav-link.nav-cta:hover { background: var(--button-hover) !important; }
.nav-toggle, .theme-toggle { min-width: 44px; min-height: 44px; }
.nav-toggle { justify-content: center; align-items: center; }
.nav-toggle span { background: var(--text); }
.theme-toggle { color: var(--text); border-color: var(--control-border); flex-shrink: 0; }
.theme-toggle:hover { background: var(--violet-soft); }
.theme-toggle[aria-pressed="true"] { background: var(--violet-soft); }
.mobile-nav { background: var(--surface); border-bottom-color: var(--border); max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav[hidden] { display: none !important; }
.mobile-nav-link { color: var(--text); min-height: 44px; }
.mobile-nav-link:hover { color: var(--rose); background: var(--violet-soft); }
@media(min-width:769px) { .mobile-nav { display: none !important; } }

/* Theme the home page, rather than leaving white copy on newly light surfaces. */
.hero-left { background: var(--surface2); color: var(--text); }
.hero-left::before { background: radial-gradient(ellipse at 0% 60%, rgba(179,56,82,.08), transparent 65%), radial-gradient(ellipse at 80% 10%, rgba(123,45,139,.08), transparent 60%); }
.hero-title { color: var(--text); }
.hero-jp, .hero-sub, .hero-social, .hero-social p { color: var(--muted); }
.hero-accent { background-image: linear-gradient(90deg, var(--rose), var(--violet)); }
.hero-right::after { background: linear-gradient(to right, var(--surface2), transparent 20%), linear-gradient(to top, var(--surface2), transparent 25%); }
.hero-tags .tag, .hero-tags .hero-topic-link { color: var(--violet); background: var(--violet-soft); border-color: var(--control-border); }
.hero-tags .hero-topic-link:hover { color: var(--text); background: var(--surface); border-color: var(--rose); }
.hero-social-links a { color: var(--rose); border-color: var(--control-border); }
.hero-social-links a:hover { color: var(--text); background: var(--surface); }
.hero-tags .hero-topic-link:focus-visible,
.hero-social-links a:focus-visible,
.chronique-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.univers, .contact { background: var(--surface2); }
.univers .section-title { color: var(--text) !important; }
.univers .eyebrow, .contact-text .eyebrow { color: var(--rose); }
.univers-card { color: var(--text); background: var(--surface); border-color: var(--border); }
.univers-card:hover { background: var(--surface2); border-color: var(--rose); }
.univers-card h3, .contact-text .section-title, .contact-info-item strong { color: var(--text); }
.univers-card p, .contact-text p, .contact-info-item { color: var(--muted); }
.contact::before { background: radial-gradient(ellipse at 80% 50%, rgba(179,56,82,.07), transparent 60%), radial-gradient(ellipse at 20% 90%, rgba(123,45,139,.06), transparent 60%); }
.footer { color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.footer-name { color: var(--text); }
.footer-tagline, .footer-nav a, .footer-copy { color: var(--muted); }
.footer-nav a:hover { color: var(--rose); }
.articles-hero { color: var(--text); background: linear-gradient(135deg, var(--surface2), var(--violet-soft)); }
.articles-hero h1 { color: var(--text); }
.articles-hero p { color: var(--muted); }

/* Book art and article-image overlays retain their deliberately dark canvases. */
.article-card--featured { color: var(--text); background: var(--surface2); border: 1px solid var(--border); }
.article-card--featured .article-cat, .article-card--featured .article-tag { color: var(--violet); background: var(--violet-soft); }
.article-card--featured .article-title { color: var(--text); }
.article-card--featured .article-excerpt, .article-card--featured .card-date { color: var(--muted); }
.article-card--featured .article-read-more { color: var(--rose); }
.spotlight-card { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.spotlight-card h3 { color: var(--text); }
.spotlight-cat, .spotlight-take .signature { color: var(--rose); }
.spotlight-take, .spotlight-foot, .news-page .spotlight-date,
.news-page .spotlight-card .news-image-credit { color: var(--muted); }
.spotlight-card .breve-share { border-top-color: var(--border); }
.spotlight-card .breve-share .share-label { color: var(--muted); }
.breve-share .share-btn, .spotlight-card .breve-share .share-btn { color: var(--rose); background: var(--surface); border-color: var(--control-border); }
.breve-share .share-btn:hover, .spotlight-card .breve-share .share-btn:hover { color: var(--on-accent); background: var(--button-bg); border-color: var(--button-bg); }
.article-share .share-btn-copy, .reader-share .share-btn-copy { color: var(--text); background: var(--surface2); border-color: var(--control-border); }
.book-status { color: var(--success); background: var(--success-soft); }
.book-status.status-projet { color: var(--violet); background: var(--violet-soft); }
.breve-cat[data-cat="Jeu vidéo"] { color: var(--success); background: var(--success-soft); }
.chronique-dialog { color: var(--text); background: var(--surface); }
.chronique-dialog h2, .chronique-dialog .chronique-body p { color: var(--text); }
.article-related { color: var(--text); background: var(--surface2) !important; }
.article-related p { color: var(--muted) !important; }
.actu-callout .callout-text strong { color: var(--text); }
html[data-theme="dark"] .card-cat[style*="#2d6a2d"] { color: var(--success) !important; }

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .theme-toggle, .header, .nav-link, .mobile-nav-link { transition: none; }
}
@media(forced-colors:active) {
  .nav-toggle span { background: ButtonText; }
  .theme-toggle, .nav-toggle, .btn, .filter-btn { border: 1px solid ButtonText; }
  .hero-accent { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}