/**
 * GRO Theme Toggle — Pixel-perfect implementation Figma node 6403-63250
 * Segmented pill switcher: sun (light) / moon (dark)
 *
 * Figma tokens:
 *   bg_02:     #141414  (dark pill background + active "moon" button)
 *   main_:     #D9B648  (active "sun" button — GRO gold)
 *   text_001:  #FFFFFF  (moon icon stroke, when inactive)
 *
 * Dimensions:
 *   wrapper:   104×60  (rounded-50px pill, padding 8)
 *   buttons:   44×44 hit-area / 36×36 visible (rounded-full)
 *   icons:     16×16 (svg stroke 1.5)
 */

/* ============================================================
   1. Toggle widget — Figma 1:1
   ============================================================ */

.gro-theme-toggle {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    background: #141414;
    border-radius: 50px;
    /* Reset button group defaults */
    border: 0;
    margin: 0;
    gap: 0;
    /* a11y: role=group, no native fieldset styling */
    list-style: none;
}

.gro-theme-toggle__btn {
    /* 44×44 hit-area для touch-comfort (WCAG 2.5.5) */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Reset button */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* Smooth state transition */
    transition: opacity 0.15s ease;
}

.gro-theme-toggle__btn:focus-visible {
    outline: 2px solid #d9b648;
    outline-offset: 2px;
    border-radius: 50%;
}

.gro-theme-toggle__btn:hover {
    opacity: 0.85;
}

/* Inner circle — это visible часть кнопки */
.gro-theme-toggle__circle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Inactive state — кружок прозрачный, иконка белая */
.gro-theme-toggle__btn[aria-pressed="false"] .gro-theme-toggle__circle {
    background: transparent;
    border: 1px solid transparent;
}

.gro-theme-toggle__btn[aria-pressed="false"] .gro-theme-toggle__icon {
    color: #ffffff;
}

/* Active state — gold кружок с тёмной обводкой (как в Figma) */
.gro-theme-toggle__btn[aria-pressed="true"] .gro-theme-toggle__circle {
    background: #d9b648;
    border: 1px solid #141414;
}

.gro-theme-toggle__btn[aria-pressed="true"] .gro-theme-toggle__icon {
    color: #141414;
}

/* Icon container 16×16 */
.gro-theme-toggle__icon {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* ============================================================
   2. Dark theme CSS variables — применяются к html[data-theme="dark"]
   ============================================================ */

:root {
    --gro-body-bg: #ffffff;
    --gro-body-text: #1a1a1a;
    --gro-article-bg: #ffffff;
    --gro-article-text: #1a1a1a;
    --gro-article-muted: #6b6b6b;
    --gro-article-border: #e8e8e8;
    --gro-article-link: #1a1a1a;
    --gro-article-link-hover: #d9b648;
    --gro-blockquote-bg: #fafafa;
    --gro-blockquote-border: #d9b648;
    --gro-code-bg: #f3f3f3;
    --gro-code-text: #1a1a1a;
    --gro-table-bg: #ffffff;
    --gro-table-border: #e8e8e8;
}

html[data-theme="dark"] {
    --gro-body-bg: #0f0f0f;
    --gro-body-text: #e8e8e8;
    --gro-article-bg: #1a1a1a;
    --gro-article-text: #e8e8e8;
    --gro-article-muted: #a0a0a0;
    --gro-article-border: #2d2d2d;
    --gro-article-link: #d9b648;
    --gro-article-link-hover: #f0c660;
    --gro-blockquote-bg: #232323;
    --gro-blockquote-border: #d9b648;
    --gro-code-bg: #2d2d2d;
    --gro-code-text: #f0ddc0;
    --gro-table-bg: #232323;
    --gro-table-border: #3a3a3a;
}

/* Smooth theme transition */
html[data-theme] body,
html[data-theme] .single-docs,
html[data-theme] .single-docs article,
html[data-theme] .entry-content {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ============================================================
   3. Article scope — переключение только для Wiki статей
   ============================================================ */

html[data-theme="dark"] body.single-docs,
html[data-theme="dark"] body.single-docs .single-docs__main,
html[data-theme="dark"] body.single-docs .entry-content {
    background: var(--gro-body-bg);
    color: var(--gro-article-text);
}

html[data-theme="dark"] body.single-docs article,
html[data-theme="dark"] body.single-docs .entry-content {
    background: var(--gro-article-bg);
}

html[data-theme="dark"] body.single-docs .entry-content :is(p, li, dd, dt) {
    color: var(--gro-article-text);
}

html[data-theme="dark"] body.single-docs .entry-content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gro-article-text);
}

html[data-theme="dark"] body.single-docs .entry-content a:not(.gro-cta):not(.button):not([class*="btn-"]) {
    color: var(--gro-article-link);
}

html[data-theme="dark"] body.single-docs .entry-content blockquote {
    background: var(--gro-blockquote-bg);
    border-left: 4px solid var(--gro-blockquote-border);
    color: var(--gro-article-text);
}

html[data-theme="dark"] body.single-docs .entry-content :is(code, pre) {
    background: var(--gro-code-bg);
    color: var(--gro-code-text);
}

html[data-theme="dark"] body.single-docs .entry-content table {
    background: var(--gro-table-bg);
    color: var(--gro-article-text);
}

html[data-theme="dark"] body.single-docs .entry-content :is(th, td) {
    border-color: var(--gro-table-border);
}

/* ============================================================
   4. Calm Commerce: paywall + CTA + toolkit ОСТАЮТСЯ brand-цвета
   ============================================================ */

html[data-theme="dark"] .paywall,
html[data-theme="dark"] .gro-toolkit,
html[data-theme="dark"] .gro-toolkit-primary,
html[data-theme="dark"] .gro-toolkit-secondary,
html[data-theme="dark"] .gro-cta,
html[data-theme="dark"] .brand-row,
html[data-theme="dark"] [class*="brand-tagline"],
html[data-theme="dark"] [class*="btn-primary"],
html[data-theme="dark"] [class*="btn-cta"] {
    /* Эти блоки рендерятся как в light — никакой инверсии */
    color: initial;
    background-color: initial;
}

html[data-theme="dark"] .paywall *,
html[data-theme="dark"] .gro-toolkit *,
html[data-theme="dark"] .gro-cta * {
    color: initial;
}

/* ============================================================
   5. Position floating toggle bottom-right on article pages
   ============================================================ */

.gro-theme-toggle--floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0.92;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gro-theme-toggle--floating:hover {
    opacity: 1;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .gro-theme-toggle--floating {
        bottom: 80px;  /* выше mobile-nav если он есть */
        right: 16px;
    }
}

/* Auto-detect OS preference if user has NOT set explicit theme */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --gro-body-bg: #0f0f0f;
        --gro-article-bg: #1a1a1a;
        --gro-article-text: #e8e8e8;
    }
}
/**
 * GRO Theme Toggle Desktop position (2026-05-17)
 * Positions injected toggle в sticky sidebar (Pillar TOC + Solution TOC).
 */

/* Desktop toggle wrapper */
.gro-theme-toggle-desktop-wrap {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--light-mode-border, #C4C2BC);
    display: flex;
    justify-content: center;
}

/* Hide on mobile (toggle уже в modal) */
@media (max-width: 768px) {
    .gro-theme-toggle-desktop-wrap {
        display: none !important;
    }
}

/* Solution TOC специфично — внутри scope контейнера */
.gro-solution-toc .gro-theme-toggle-desktop-wrap {
    margin-top: 32px;
}

/* Dark mode — border match */
html[data-theme="dark"] .gro-theme-toggle-desktop-wrap {
    border-top-color: #3d3d3d;
}