/* jonark — themes.css — light/dark/system theming */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-surface-base: #ffffff;
    --color-surface-raised: #f5f3ef;
    --color-surface-overlay: rgba(245,243,239,0.92);
    --color-text-primary: rgba(26,26,24,0.87);
    --color-text-secondary: rgba(61,61,56,0.80);
    --color-text-muted: rgba(107,107,100,1);
    --color-text-invert: rgba(240,237,232,0.92);
    --color-text-link: #b84400;
    --color-border-default: rgba(26,26,24,0.75);
    --color-border-strong: rgba(26,26,24,1);
    --color-border-subtle: rgba(26,26,24,0.12);
    --color-accent-default: rgba(255,102,0,0.85);
    --color-accent-hover: rgba(255,102,0,1);
    --color-accent-muted: rgba(255,102,0,0.12);
    --color-accent-text: #b84400;
    --color-feedback-success: #2d6a4f;
    --color-feedback-warning: #b45309;
    --color-feedback-error: #b91c1c;
    --color-feedback-info: #1d4ed8;
    --color-interactive-bg: #1a1a18;
    --color-interactive-fg: #ffffff;
    --color-interactive-hover-bg: #3d3d38;
    --color-interactive-hover-fg: #ffffff;
    --color-shadow-sm: rgba(26,26,24,0.06);
    --color-shadow-md: rgba(26,26,24,0.12);
    --color-shadow-lg: rgba(26,26,24,0.22);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-surface-base: #141412;
    --color-surface-raised: #1e1e1b;
    --color-surface-overlay: rgba(20,20,18,0.92);
    --color-text-primary: rgba(240,237,232,0.92);
    --color-text-secondary: rgba(200,197,190,0.82);
    --color-text-muted: rgba(144,141,133,1);
    --color-text-invert: rgba(26,26,24,0.87);
    --color-text-link: #ff8040;
    --color-border-default: rgba(240,237,232,0.55);
    --color-border-strong: rgba(240,237,232,0.90);
    --color-border-subtle: rgba(240,237,232,0.10);
    --color-accent-default: rgba(255,128,64,0.85);
    --color-accent-hover: rgba(255,128,64,1);
    --color-accent-muted: rgba(255,128,64,0.14);
    --color-accent-text: #ff8040;
    --color-feedback-success: #4ade80;
    --color-feedback-warning: #fbbf24;
    --color-feedback-error: #f87171;
    --color-feedback-info: #60a5fa;
    --color-interactive-bg: #f0ede8;
    --color-interactive-fg: #141412;
    --color-interactive-hover-bg: #ffffff;
    --color-interactive-hover-fg: #141412;
    --color-shadow-sm: rgba(0,0,0,0.18);
    --color-shadow-md: rgba(0,0,0,0.32);
    --color-shadow-lg: rgba(0,0,0,0.52);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --color-surface-base: #ffffff;
  --color-surface-raised: #f5f3ef;
  --color-surface-overlay: rgba(245,243,239,0.92);
  --color-text-primary: rgba(26,26,24,0.87);
  --color-text-secondary: rgba(61,61,56,0.80);
  --color-text-muted: rgba(107,107,100,1);
  --color-text-invert: rgba(240,237,232,0.92);
  --color-text-link: #b84400;
  --color-border-default: rgba(26,26,24,0.75);
  --color-border-strong: rgba(26,26,24,1);
  --color-border-subtle: rgba(26,26,24,0.12);
  --color-accent-default: rgba(255,102,0,0.85);
  --color-accent-hover: rgba(255,102,0,1);
  --color-accent-muted: rgba(255,102,0,0.12);
  --color-accent-text: #b84400;
  --color-feedback-success: #2d6a4f;
  --color-feedback-warning: #b45309;
  --color-feedback-error: #b91c1c;
  --color-feedback-info: #1d4ed8;
  --color-interactive-bg: #1a1a18;
  --color-interactive-fg: #ffffff;
  --color-interactive-hover-bg: #3d3d38;
  --color-interactive-hover-fg: #ffffff;
  --color-shadow-sm: rgba(26,26,24,0.06);
  --color-shadow-md: rgba(26,26,24,0.12);
  --color-shadow-lg: rgba(26,26,24,0.22);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-surface-base: #141412;
  --color-surface-raised: #1e1e1b;
  --color-surface-overlay: rgba(20,20,18,0.92);
  --color-text-primary: rgba(240,237,232,0.92);
  --color-text-secondary: rgba(200,197,190,0.82);
  --color-text-muted: rgba(144,141,133,1);
  --color-text-invert: rgba(26,26,24,0.87);
  --color-text-link: #ff8040;
  --color-border-default: rgba(240,237,232,0.55);
  --color-border-strong: rgba(240,237,232,0.90);
  --color-border-subtle: rgba(240,237,232,0.10);
  --color-accent-default: rgba(255,128,64,0.85);
  --color-accent-hover: rgba(255,128,64,1);
  --color-accent-muted: rgba(255,128,64,0.14);
  --color-accent-text: #ff8040;
  --color-feedback-success: #4ade80;
  --color-feedback-warning: #fbbf24;
  --color-feedback-error: #f87171;
  --color-feedback-info: #60a5fa;
  --color-interactive-bg: #f0ede8;
  --color-interactive-fg: #141412;
  --color-interactive-hover-bg: #ffffff;
  --color-interactive-hover-fg: #141412;
  --color-shadow-sm: rgba(0,0,0,0.18);
  --color-shadow-md: rgba(0,0,0,0.32);
  --color-shadow-lg: rgba(0,0,0,0.52);
}

html { color-scheme: light dark; }

body {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  transition: background-color 0.25s ease, color 0.20s ease;
}

.site-header { background: var(--color-surface-base); }
header hr, .site-header hr { background: var(--color-border-default); }
nav a { color: var(--color-text-primary); }
footer { color: var(--color-text-secondary); }

.btn {
  background: var(--color-interactive-bg);
  color: var(--color-interactive-fg);
  border-color: var(--color-interactive-bg);
}
.btn:hover {
  background: var(--color-interactive-hover-bg);
  color: var(--color-interactive-hover-fg);
  opacity: 1;
}

.marquee-wrapper {
  color: var(--color-accent-default);
  border-top-color: var(--color-border-subtle);
  border-bottom-color: var(--color-border-subtle);
}

.theme-toggle {
  width: 1.6rem; height: 1.6rem;
  padding: 0; border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover { opacity: 0.6; }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent-default); outline-offset: 2px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme]) .theme-toggle .icon-sun  { display: block; }
}

/* LOGO INVERT FOR DARK MODE */
[data-theme="dark"] .logo {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo {
    filter: invert(1);
  }
}

/* INVERT TEXT-IMAGE ASSETS IN DARK MODE */
[data-theme="dark"] .section-heading-img,
[data-theme="dark"] .product-heading-img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .section-heading-img,
  :root:not([data-theme]) .product-heading-img {
    filter: invert(1);
  }
}