/* Martini Tech — design tokens (system / data-theme light|dark) */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

html {
  color-scheme: light dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

.body-martini-tech {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --surface: #f6f7f9;
  --surface-2: #f1f3f4;
  --card: #ffffff;
  --text: #3c3c3c;
  --heading: #141414;
  --muted: #5f6368;
  --border: #e3e6ea;
  --blue: #136ef5;
  --blue-hover: #0f58c4;
  --active-bg: #e7f0fe;
  --active-text: #136ef5;
  --on-primary: #ffffff;
  --focus-ring: #136ef5;
  --code-bg: #ffffff;
  --code-bar: #f2f6fd;
  --code-text: #3c3c3c;
  --code-border: #e3e6ea;
  --code-lang: #0b4293;
  --inline-code-bg: #f6f7f9;
  --ok: #1e8e3e;
  --err: #d93025;
  --quiz-ok: #1e8e3e;
  --quiz-err: #d93025;
  --input-bg: #f2f6fd;
  --input-border: #e7f0fe;
  --placeholder: #5f6368;
  --scrollbar-thumb: #d5d9de;
  --scrollbar-thumb-hover: #bfc5cc;
  --theme-toggle-hover: #f1f3f4;
  --header-bg: #ffffff;
  --topics-bg: #ffffff;
  --nav-link: #3c3c3c;
  --nav-indicator: #136ef5;
  --nav-indicator-soft: #b8d3fc;
  --radio-border: #c4c7cc;
  --callout-note-bg: #f2f6fd;
  --callout-tip-bg: #eef8f1;
  --callout-caution-bg: #fff7eb;
  --caution: #f29900;
  --img-border: #e3e6ea;
  --hub-hero-bg: #136ef5;
  --hub-hero-fg: #ffffff;
  --hub-hero-lede: #e7f0fe;
  --hub-hero-meta: #b8d3fc;
  --hub-hero-grid: rgba(255, 255, 255, 0.12);
  --pager-hover: #f6f7f9;
  --copy-hover: #e7f0fe;
  --article-shell-bg: #f6f7f9;
  --toc-fade: #f6f7f9;
  --shadow-subtle: transparent;

  /* Category accents (light) */
  --cat-seo-tint: #e7f0fe;
  --cat-seo-accent: #0b4293;
  --cat-ai-accent: #7c4dff;
  --cat-ai-tint: #f1ecff;
  --cat-ai-tint-text: #5f3dc4;
  --cat-num-fg: #ffffff;
  --cat-num-bg: #141414;

  /* Legacy aliases */
  --tech-bg: var(--card);
  --tech-surface: var(--surface);
  --tech-border: var(--border);
  --tech-text: var(--heading);
  --tech-text-mid: var(--text);
  --tech-text-muted: var(--muted);
  --tech-blue: var(--blue);
  --tech-blue-hover: var(--blue-hover);
  --tech-blue-soft: var(--active-bg);
  --tech-blue-wash: var(--input-bg);
  --tech-blue-mid: var(--nav-indicator-soft);
  --tech-blue-dark: var(--code-lang);
  --tech-blue-darker: #082c62;
  --tech-code-bg: var(--code-bg);
}

html[data-theme="dark"] .body-martini-tech {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1e222b;
  --card: #171a21;
  --text: #d7dae0;
  --heading: #f3f4f6;
  --muted: #9aa1ad;
  --border: #2a2f3a;
  --blue: #7fb2ff;
  --blue-hover: #a8cbff;
  --blue-cta: #2f7bf0;
  --blue-cta-hover: #1f6ae0;
  --blue-soft: rgba(127, 178, 255, 0.14);
  --blue-border: rgba(127, 178, 255, 0.45);
  --focus: #a8cbff;
  --active-bg: var(--blue-soft);
  --active-text: var(--blue);
  --on-primary: #ffffff;
  --focus-ring: var(--focus);
  --code-bg: #12151b;
  --code-bar: #1e222b;
  --code-text: #e6e8ec;
  --code-border: #2a2f3a;
  --code-lang: var(--blue-hover);
  --inline-code-bg: #1e222b;
  --ok: #4cc38a;
  --err: #ff6b6b;
  --quiz-ok: #4cc38a;
  --quiz-err: #ff6b6b;
  --input-bg: #171a21;
  --input-border: #2a2f3a;
  --placeholder: #7d8491;
  --scrollbar-thumb: #3a404c;
  --scrollbar-thumb-hover: #4a515e;
  --theme-toggle-hover: #1e222b;
  --header-bg: #171a21;
  --topics-bg: #171a21;
  --nav-link: #d7dae0;
  --nav-indicator: var(--blue);
  --nav-indicator-soft: var(--blue-border);
  --radio-border: #4a515e;
  --callout-note-bg: var(--blue-soft);
  --callout-tip-bg: rgba(76, 195, 138, 0.12);
  --callout-caution-bg: rgba(255, 193, 77, 0.12);
  --caution: #e8a84a;
  --img-border: #2a2f3a;
  --hub-hero-bg: #1a3d6e;
  --hub-hero-fg: #f3f4f6;
  --hub-hero-lede: #c5d9f5;
  --hub-hero-meta: var(--blue-hover);
  --hub-hero-grid: rgba(255, 255, 255, 0.08);
  --pager-hover: #1e222b;
  --copy-hover: var(--blue-soft);
  --article-shell-bg: #0f1115;
  --toc-fade: #0f1115;
  --shadow-subtle: rgba(0, 0, 0, 0.35);
  --cat-seo-tint: var(--blue-soft);
  --cat-seo-accent: var(--blue-hover);
  --cat-ai-accent: #9c7bff;
  --cat-ai-tint: rgba(156, 123, 255, 0.14);
  --cat-ai-tint-text: #d4c4ff;
  --tech-blue: var(--blue);
  --tech-blue-hover: var(--blue-hover);
  --tech-blue-soft: var(--blue-soft);
  --tech-blue-wash: var(--blue-soft);
  --tech-blue-mid: var(--blue-border);
  --tech-blue-dark: var(--blue-hover);
  --cat-num-fg: #f3f4f6;
  --cat-num-bg: #2a2f3a;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .body-martini-tech {
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1e222b;
    --card: #171a21;
    --text: #d7dae0;
    --heading: #f3f4f6;
    --muted: #9aa1ad;
    --border: #2a2f3a;
    --blue: #7fb2ff;
    --blue-hover: #a8cbff;
    --blue-cta: #2f7bf0;
    --blue-cta-hover: #1f6ae0;
    --blue-soft: rgba(127, 178, 255, 0.14);
    --blue-border: rgba(127, 178, 255, 0.45);
    --focus: #a8cbff;
    --active-bg: var(--blue-soft);
    --active-text: var(--blue);
    --on-primary: #ffffff;
    --focus-ring: var(--focus);
    --code-bg: #12151b;
    --code-bar: #1e222b;
    --code-text: #e6e8ec;
    --code-border: #2a2f3a;
    --code-lang: var(--blue-hover);
    --inline-code-bg: #1e222b;
    --ok: #4cc38a;
    --err: #ff6b6b;
    --quiz-ok: #4cc38a;
    --quiz-err: #ff6b6b;
    --input-bg: #171a21;
    --input-border: #2a2f3a;
    --placeholder: #7d8491;
    --scrollbar-thumb: #3a404c;
    --scrollbar-thumb-hover: #4a515e;
    --theme-toggle-hover: #1e222b;
    --header-bg: #171a21;
    --topics-bg: #171a21;
    --nav-link: #d7dae0;
    --nav-indicator: var(--blue);
    --nav-indicator-soft: var(--blue-border);
    --radio-border: #4a515e;
    --callout-note-bg: var(--blue-soft);
    --callout-tip-bg: rgba(76, 195, 138, 0.12);
    --callout-caution-bg: rgba(255, 193, 77, 0.12);
    --caution: #e8a84a;
    --img-border: #2a2f3a;
    --hub-hero-bg: #1a3d6e;
    --hub-hero-fg: #f3f4f6;
    --hub-hero-lede: #c5d9f5;
    --hub-hero-meta: var(--blue-hover);
    --hub-hero-grid: rgba(255, 255, 255, 0.08);
    --pager-hover: #1e222b;
    --copy-hover: var(--blue-soft);
    --article-shell-bg: #0f1115;
    --toc-fade: #0f1115;
    --shadow-subtle: rgba(0, 0, 0, 0.35);

    --cat-seo-tint: var(--blue-soft);
    --cat-seo-accent: var(--blue-hover);
    --cat-ai-accent: #9c7bff;
    --cat-ai-tint: rgba(156, 123, 255, 0.14);
    --cat-ai-tint-text: #d4c4ff;
    --tech-blue: var(--blue);
    --tech-blue-hover: var(--blue-hover);
    --tech-blue-soft: var(--blue-soft);
    --tech-blue-wash: var(--blue-soft);
    --tech-blue-mid: var(--blue-border);
    --tech-blue-dark: var(--blue-hover);
    --cat-num-fg: #f3f4f6;
    --cat-num-bg: #2a2f3a;
  }
}

html[data-theme="light"] .body-martini-tech {
  --bg: #f6f7f9;
  --surface: #f6f7f9;
  --surface-2: #f1f3f4;
  --card: #ffffff;
  --text: #3c3c3c;
  --heading: #141414;
  --muted: #5f6368;
  --border: #e3e6ea;
  --blue: #136ef5;
  --blue-hover: #0f58c4;
  --active-bg: #e7f0fe;
  --active-text: #136ef5;
  --on-primary: #ffffff;
  --focus-ring: #136ef5;
  --code-bg: #ffffff;
  --code-bar: #f2f6fd;
  --code-text: #3c3c3c;
  --code-border: #e3e6ea;
  --code-lang: #0b4293;
  --inline-code-bg: #f6f7f9;
  --ok: #1e8e3e;
  --err: #d93025;
  --quiz-ok: #1e8e3e;
  --quiz-err: #d93025;
  --input-bg: #f2f6fd;
  --input-border: #e7f0fe;
  --placeholder: #5f6368;
  --scrollbar-thumb: #d5d9de;
  --scrollbar-thumb-hover: #bfc5cc;
  --theme-toggle-hover: #f1f3f4;
  --header-bg: #ffffff;
  --topics-bg: #ffffff;
  --nav-link: #3c3c3c;
  --nav-indicator: #136ef5;
  --nav-indicator-soft: #b8d3fc;
  --radio-border: #c4c7cc;
  --callout-note-bg: #f2f6fd;
  --callout-tip-bg: #eef8f1;
  --callout-caution-bg: #fff7eb;
  --caution: #f29900;
  --img-border: #e3e6ea;
  --hub-hero-bg: #136ef5;
  --hub-hero-fg: #ffffff;
  --hub-hero-lede: #e7f0fe;
  --hub-hero-meta: #b8d3fc;
  --hub-hero-grid: rgba(255, 255, 255, 0.12);
  --pager-hover: #f6f7f9;
  --copy-hover: #e7f0fe;
  --article-shell-bg: #f6f7f9;
  --toc-fade: #f6f7f9;
  --shadow-subtle: transparent;
  --cat-seo-tint: #e7f0fe;
  --cat-seo-accent: #0b4293;
  --cat-ai-accent: #7c4dff;
  --cat-ai-tint: #f1ecff;
  --cat-ai-tint-text: #5f3dc4;
  --cat-num-fg: #ffffff;
  --cat-num-bg: #141414;
}

.body-martini-tech {
  background: var(--bg);
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .body-martini-tech,
  .body-martini-tech .tech-header,
  .body-martini-tech .tech-topics,
  .body-martini-tech .tech-chrome-sticky {
    transition:
      background-color 150ms ease,
      color 150ms ease,
      border-color 150ms ease;
  }
}