/*
 * Maccy Theme System — v2.0
 * Warm cream light mode + refined dark mode
 * maccymanager.com
 */

/* ═══════════════════════════════════════════════
   1. LIGHT MODE TOKENS — warm cream palette
   ═══════════════════════════════════════════════ */
:root {
  /* ③ Amber Copper accent */
  --dl-accent:     #c2691d;
  --dl-accent-2:   #9a4c10;
  --dl-accent-tint:#fff7ed;
  --t-bg:          #f5ede0;
  --t-bg2:         #ede3d5;
  --t-bg3:         #e3d8c8;
  --t-text:        #2d2a26;
  --t-text2:       #6b5c4a;
  --t-text3:       #9e8e7a;
  --t-head:        #1a1714;
  --t-link:        #c2691d;
  --t-link-h:      #9a4c10;
  --t-sel-bg:      #c2691d;
  --t-sel-txt:     #fff7ed;
  --t-border:      #d4c8b4;
  --t-border2:     #bfb09a;
  --t-nav-bg:      #1a1714;
  --t-nav-menu:    #2d2a26;
  --t-card-bg:     rgba(194,105,29,.04);
  --t-card-cmd:    rgba(194,105,29,.07);
  --t-kbd-bg:      rgba(45,42,38,.10);
  --t-toggle-bg:   rgba(245,237,224,.95);
  --t-toggle-bdr:  rgba(194,105,29,.22);
  --t-toggle-shd:  0 2px 10px rgba(194,105,29,.13), 0 0 0 1px rgba(194,105,29,.04);
  --t-hero-g1:     rgba(194,105,29,.18);
  --t-hero-g2:     rgba(255,200,120,.14);
  --t-skip-bg:     #1a1714;
  --t-skip-txt:    #fff7ed;
}

/* ═══════════════════════════════════════════════
   2. DARK MODE TOKENS
   ═══════════════════════════════════════════════ */
html[data-theme="dark"] {
  --dl-accent:     #fb923c;
  --dl-accent-2:   #fdba74;
  --dl-accent-tint:rgba(251,146,60,.12);
  --t-bg:          #0e0d0b;
  --t-bg2:         #1a1814;
  --t-bg3:         #252118;
  --t-text:        #e5ddd0;
  --t-text2:       #a09080;
  --t-text3:       #6a5e50;
  --t-head:        #f0e8d8;
  --t-link:        #fb923c;
  --t-link-h:      #fdba74;
  --t-sel-bg:      #7c3c10;
  --t-sel-txt:     #fff7ed;
  --t-border:      #2e2820;
  --t-border2:     #3e3628;
  --t-nav-bg:      #141210;
  --t-nav-menu:    #1a1814;
  --t-card-bg:     rgba(255,255,255,.025);
  --t-card-cmd:    rgba(255,255,255,.07);
  --t-kbd-bg:      rgba(255,255,255,.09);
  --t-toggle-bg:   rgba(18,16,12,.95);
  --t-toggle-bdr:  rgba(251,146,60,.22);
  --t-toggle-shd:  0 2px 16px rgba(0,0,0,.55), 0 0 0 1px rgba(251,146,60,.08);
  --t-hero-g1:     rgba(251,146,60,.22);
  --t-hero-g2:     rgba(200,120,50,.18);
  --t-skip-bg:     #1a1814;
  --t-skip-txt:    #fff7ed;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --dl-accent:     #fb923c;
    --dl-accent-2:   #fdba74;
    --dl-accent-tint:rgba(251,146,60,.12);
    --t-bg:          #0e0d0b;
    --t-bg2:         #1a1814;
    --t-bg3:         #252118;
    --t-text:        #e5ddd0;
    --t-text2:       #a09080;
    --t-text3:       #6a5e50;
    --t-head:        #f0e8d8;
    --t-link:        #fb923c;
    --t-link-h:      #fdba74;
    --t-sel-bg:      #7c3c10;
    --t-sel-txt:     #fff7ed;
    --t-border:      #2e2820;
    --t-border2:     #3e3628;
    --t-nav-bg:      #141210;
    --t-nav-menu:    #1a1814;
    --t-card-bg:     rgba(255,255,255,.025);
    --t-card-cmd:    rgba(255,255,255,.07);
    --t-kbd-bg:      rgba(255,255,255,.09);
    --t-toggle-bg:   rgba(18,16,12,.95);
    --t-toggle-bdr:  rgba(251,146,60,.22);
    --t-toggle-shd:  0 2px 16px rgba(0,0,0,.55), 0 0 0 1px rgba(251,146,60,.08);
    --t-hero-g1:     rgba(251,146,60,.22);
    --t-hero-g2:     rgba(200,120,50,.18);
    --t-skip-bg:     #1a1814;
    --t-skip-txt:    #fff7ed;
    color-scheme: dark;
  }
}

/* ═══════════════════════════════════════════════
   3. SMOOTH THEME TRANSITION
   ═══════════════════════════════════════════════ */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color .28s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    fill .22s ease !important;
}

/* ═══════════════════════════════════════════════
   4. MAIN.CSS OVERRIDES — base elements
   ═══════════════════════════════════════════════ */

body {
  background-color: var(--t-bg);
  color: var(--t-text);
}

*::selection {
  background-color: var(--t-sel-bg);
  color: var(--t-sel-txt);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--t-head);
}

a, .link,
.links-02__link,
.links-04__link,
.links-05__link,
.links-06__link {
  color: var(--t-link);
}

p a:hover,
.link:hover,
.links-02__link:hover,
.links-04__link:hover,
.links-05__link:hover,
.links-06__link:hover {
  color: var(--t-link-h);
}

.subheading { color: var(--t-link); }

hr { border-color: var(--t-border); }

/* Nav — mobile fixed background */
@media (max-width: 900px) {
  .nav-01 { background-color: var(--t-nav-bg); }
  .nav-02 { background-color: var(--t-nav-bg); }
  .nav-03 { background-color: var(--t-nav-bg); }
  .nav-01__list,
  .nav-02__list,
  .nav-03__list { background-color: var(--t-nav-menu); }
}

/* ═══════════════════════════════════════════════
   5. DL-* COMPONENT OVERRIDES
   ═══════════════════════════════════════════════ */

/* Hero gradient */
html[data-theme="dark"] .dl-hero::before {
  background:
    radial-gradient(60% 60% at 50% 0%, var(--t-hero-g1), transparent 70%),
    radial-gradient(40% 40% at 75% 20%, var(--t-hero-g2), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dl-hero::before {
    background:
      radial-gradient(60% 60% at 50% 0%, var(--t-hero-g1), transparent 70%),
      radial-gradient(40% 40% at 75% 20%, var(--t-hero-g2), transparent 70%);
  }
}

/* Code/cmd blocks */
html[data-theme="dark"] .dl-card__cmd { background: var(--t-card-cmd); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dl-card__cmd { background: var(--t-card-cmd); }
}

/* Kbd elements */
html[data-theme="dark"] kbd,
html[data-theme="dark"] .maccy-shortcuts kbd {
  background: var(--t-kbd-bg);
  border-color: rgba(251,146,60,.25);
  color: var(--t-text);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) kbd,
  html:not([data-theme="light"]) .maccy-shortcuts kbd {
    background: var(--t-kbd-bg);
    border-color: rgba(251,146,60,.25);
    color: var(--t-text);
  }
}

/* Window bar */
html[data-theme="dark"] .dl-window {
  border-color: rgba(251,146,60,.15);
  box-shadow: 0 30px 60px -28px rgba(251,146,60,.2), 0 10px 28px -14px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dl-window {
    border-color: rgba(251,146,60,.15);
    box-shadow: 0 30px 60px -28px rgba(251,146,60,.2), 0 10px 28px -14px rgba(0,0,0,.5);
  }
}

/* Skip link */
html[data-theme="dark"] .skip-link:focus {
  background: var(--t-skip-bg);
  color: var(--t-skip-txt);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .skip-link:focus {
    background: var(--t-skip-bg);
    color: var(--t-skip-txt);
  }
}

/* Blog article */
html[data-theme="dark"] .blog { color: var(--t-text); }
html[data-theme="dark"] .blog h1,
html[data-theme="dark"] .blog h2,
html[data-theme="dark"] .blog h3 { color: var(--t-head); }
html[data-theme="dark"] .blog a { color: var(--t-link); }
html[data-theme="dark"] .blog a:hover { color: var(--t-link-h); }
html[data-theme="dark"] .blog-verdict {
  background: rgba(251,146,60,.1);
  border-left-color: var(--dl-accent);
}
html[data-theme="dark"] .blog__meta { color: var(--t-text2); }
html[data-theme="dark"] .blog__cat {
  background: rgba(251,146,60,.15);
  color: var(--dl-accent);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .blog { color: var(--t-text); }
  html:not([data-theme="light"]) .blog h1,
  html:not([data-theme="light"]) .blog h2,
  html:not([data-theme="light"]) .blog h3 { color: var(--t-head); }
  html:not([data-theme="light"]) .blog a { color: var(--t-link); }
  html:not([data-theme="light"]) .blog a:hover { color: var(--t-link-h); }
  html:not([data-theme="light"]) .blog-verdict {
    background: rgba(251,146,60,.1);
    border-left-color: var(--dl-accent);
  }
  html:not([data-theme="light"]) .blog__meta { color: var(--t-text2); }
  html:not([data-theme="light"]) .blog__cat {
    background: rgba(251,146,60,.15);
    color: var(--dl-accent);
  }
}

/* Footer */
html[data-theme="dark"] .footer-01 { border-top-color: var(--t-border); }
html[data-theme="dark"] .footer-01__link,
html[data-theme="dark"] .footer-01__sitemap a { color: var(--t-text2); }
html[data-theme="dark"] .footer-01__sitemap a:hover { color: var(--t-link); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .footer-01 { border-top-color: var(--t-border); }
  html:not([data-theme="light"]) .footer-01__link,
  html:not([data-theme="light"]) .footer-01__sitemap a { color: var(--t-text2); }
}

/* Tables */
html[data-theme="dark"] .maccy-compare,
html[data-theme="dark"] .maccy-shortcuts { color: var(--t-text); }
html[data-theme="dark"] .maccy-compare th,
html[data-theme="dark"] .maccy-shortcuts th { color: var(--t-text2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .maccy-compare,
  html:not([data-theme="light"]) .maccy-shortcuts { color: var(--t-text); }
  html:not([data-theme="light"]) .maccy-compare th,
  html:not([data-theme="light"]) .maccy-shortcuts th { color: var(--t-text2); }
}

/* FAQ */
html[data-theme="dark"] details { border-color: var(--t-border); }
html[data-theme="dark"] summary { color: var(--t-head); }
html[data-theme="dark"] details p { color: var(--t-text); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) details { border-color: var(--t-border); }
  html:not([data-theme="light"]) summary { color: var(--t-head); }
  html:not([data-theme="light"]) details p { color: var(--t-text); }
}

/* Code inline */
html[data-theme="dark"] code {
  background: rgba(255,255,255,.07);
  color: var(--dl-accent-2);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) code {
    background: rgba(255,255,255,.07);
    color: var(--dl-accent-2);
  }
}

/* ═══════════════════════════════════════════════
   6. THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════ */
.theme-toggle {
  position: fixed;
  top: .9rem;
  right: .9rem;
  z-index: 9990;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--t-toggle-bdr);
  background: var(--t-toggle-bg);
  box-shadow: var(--t-toggle-shd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--t-text);
  transition:
    transform .2s cubic-bezier(.34,1.56,.64,1),
    border-color .2s ease,
    box-shadow .2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(12deg);
  border-color: var(--dl-accent);
  box-shadow:
    var(--t-toggle-shd),
    0 0 0 3px rgba(45,42,38,.12);
}

.theme-toggle:active {
  transform: scale(.92);
  transition-duration: .08s;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 3px;
}

/* Icon visibility */
.t-sun { display: none; }
.t-moon { display: block; }

html[data-theme="dark"] .t-sun { display: block; }
html[data-theme="dark"] .t-moon { display: none; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .t-sun { display: block; }
  html:not([data-theme="light"]) .t-moon { display: none; }
}

/* ═══════════════════════════════════════════════
   7. SCROLL REVEAL
   ═══════════════════════════════════════════════ */
.js-loaded .js-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.js-loaded .js-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js-loaded .js-reveal:nth-child(2) { transition-delay: .07s; }
.js-loaded .js-reveal:nth-child(3) { transition-delay: .14s; }
.js-loaded .js-reveal:nth-child(4) { transition-delay: .21s; }
.js-loaded .js-reveal:nth-child(5) { transition-delay: .28s; }
.js-loaded .js-reveal:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-loaded .js-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════
   8. UI IMPROVEMENTS
   ═══════════════════════════════════════════════ */

p a:not(.dl-btn):not(.skip-link) {
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(194,105,29,.25);
}
html[data-theme="dark"] p a:not(.dl-btn) {
  text-decoration-color: rgba(251,146,60,.3);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) p a:not(.dl-btn) {
    text-decoration-color: rgba(251,146,60,.3);
  }
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.dl-card { will-change: transform; }

.dl-btn { will-change: transform; }
.dl-btn:active {
  transform: scale(.97) !important;
  transition-duration: .08s !important;
}

details { overflow: hidden; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }

/* Breadcrumb dark mode */
html[data-theme="dark"] .blog__crumb,
html[data-theme="dark"] .blog__crumb a { color: var(--t-text2); }
html[data-theme="dark"] .blog__crumb a:hover { color: var(--t-link); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .blog__crumb { color: var(--t-text2); }
  html:not([data-theme="light"]) .blog__crumb a { color: var(--t-text2); }
}

/* Blog nav dark mode */
html[data-theme="dark"] .blog-nav { border-color: var(--t-border); color: var(--t-text2); }
html[data-theme="dark"] .blog-nav a { color: var(--t-text); }
html[data-theme="dark"] .blog-nav a:hover { color: var(--t-link); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .blog-nav { border-color: var(--t-border); }
  html:not([data-theme="light"]) .blog-nav a { color: var(--t-text); }
}

/* ═══════════════════════════════════════════════
   9. PRINT STYLES
   ═══════════════════════════════════════════════ */
@media print {
  .theme-toggle { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}