/* ================================================================
   PHOTON — светлая тема (отдельный файл; см. docs/THEME_ARCHITECTURE.md)
   Меняй --brand и токены ниже. Активируется data-theme="light".
   ================================================================ */

/* ================================================================
   ■ PHOTON — классическая светлая тема имиджборд
   Светло-серый фон (#eee), посты #ddd, оранжевый акцент (#f60).
   ================================================================ */
[data-theme="latte"] {

    /* ── ДИЗАЙН-ТОКЕНЫ: бренд (ЕДИНЫЙ источник акцента — меняй ЗДЕСЬ) ──
       Поменяй --brand → подтянутся кнопки/чипы/бордеры/crimson-* и т.д. */
    --brand:            #8839ef;
    --brand-700:        #7a2fd8;
    --brand-300:        #a877f0;
    --radius-sm:        5px;
    --radius-pill:      999px;

    /* ── Фоны ── */
    --bg-page:          #eff1f5;
    --bg-header:        #e6e9ef;
    --bg-form:          #e9ebf1;
    --bg-post-op:       #e8eaf0;
    --bg-post-reply:    #f1f3f7;
    --bg-input:         #ffffff;
    --bg-btn:           var(--brand);
    --bg-btn-hover:     var(--brand-700);
    --bg-admin-side:    #e6e9ef;
    --bg-admin-head:    #e8eaf0;
    --bg-tag:           #dce0e8;
    --bg-code:          #e6e9ef;
    --bg-sidebar:       #e6e9ef;

    --bg-notify:        color-mix(in srgb, var(--brand) 10%, transparent);
    --bg-notify-border: color-mix(in srgb, var(--brand) 30%, transparent);

    /* ── Границы ── */
    --border-post:      #ccd0da;
    --border-op:        var(--brand);
    --border-form:      #bcc0cc;
    --border-input:     #acb0be;
    --border-sep:       #d6d9e1;

    /* ── Текст ── */
    --text-main:        #4c4f69;
    --text-dim:         #5c5f77;
    --text-muted:       #8c8fa1;
    --text-header:      #4c4f69;
    --text-link:        #1e66f5;
    --text-link-hover:  #1149c9;
    --text-subject:     #8839ef;
    --text-name:        #1e66f5;
    --text-btn:         #ffffff;
    --text-green:       #40a02b;
    --text-num:         #8c8fa1;
    --text-relnum:      #9ca0b0;

    /* ── Акценты ── */
    --crimson:          var(--brand);
    --crimson-dark:     var(--brand-700);
    --crimson-light:    var(--brand-300);
    --accent:           #40a02b;
    --accent-dark:      #318420;

    /* ── Метрики ── */
    --site-width:       1200px;
    --radius:           8px;
    --radius-lg:        12px;
    --content-pad:      clamp(16px, 2.5vw, 32px);
    --max-width:        720px;
    --form-width:       720px;
    --font-size:        14px;
    --font-family:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md:        0 4px 14px rgba(0, 0, 0, 0.14);

    /* ── Спейсинг ── */
    --gap-thread:       20px;
    --pad-post-y:       22px;
    --pad-post-x:       26px;
    --pad-form-y:       24px;
    --pad-form-x:       26px;
    --line-height:      1.65;

    /* ── Sage ── */

    /* ── Галерея — наследует деривативы из :root (от --bg-header/--text-main),
       поэтому отдельные значения не нужны: плашки сами становятся светлыми. ── */

    /* ── Модалки ── */
    --modal-overlay:    rgba(51, 51, 51, 0.40);

    /* ── Алерты ── */
    --alert-error-bg:       rgba(163, 59, 59, 0.08);
    --alert-error-border:   rgba(163, 59, 59, 0.30);
    --alert-error-color:    #d20f39;
    --alert-success-bg:     rgba(111, 138, 58, 0.12);
    --alert-success-border: rgba(111, 138, 58, 0.32);
    --alert-success-color:  #40a02b;
    --alert-info-bg:        rgba(47, 95, 140, 0.08);
    --alert-info-border:    rgba(47, 95, 140, 0.28);
    --alert-info-color:     #1e66f5;
    --alert-warning-bg:     rgba(207, 106, 46, 0.10);
    --alert-warning-border: rgba(207, 106, 46, 0.30);
    --alert-warning-color:  #df8e1d;

    /* ── Форма ── */
    --form-drop-hover:  color-mix(in srgb, var(--brand) 8%, transparent);

    /* ── Кнопки модерации ── */
    --mod-del-color:        #d20f39;
    --mod-del-border:       rgba(163, 59, 59, 0.32);
    --mod-del-hover-bg:     rgba(163, 59, 59, 0.08);
    --mod-ban-color:        #8839ef;
    --mod-ban-border:       rgba(110, 58, 158, 0.32);
    --mod-ban-hover-bg:     rgba(110, 58, 158, 0.08);
    --mod-bansoft-color:    #7287fd;
    --mod-bansoft-border:   rgba(88, 72, 160, 0.30);
    --mod-bansoft-hover-bg: rgba(88, 72, 160, 0.08);
    --mod-ip-color:         #1e66f5;
    --mod-ip-border:        rgba(47, 95, 140, 0.32);
    --mod-ip-hover-bg:      rgba(47, 95, 140, 0.08);
    --mod-pin-color:        #40a02b;
    --mod-pin-border:       rgba(111, 138, 58, 0.34);
    --mod-pin-hover-bg:     rgba(111, 138, 58, 0.10);
    --mod-lock-color:       #fe640b;
    --mod-lock-border:      rgba(207, 106, 46, 0.34);
    --mod-lock-hover-bg:    rgba(207, 106, 46, 0.10);
    --mod-cycle-color:      #179299;
    --mod-cycle-border:     rgba(47, 95, 140, 0.28);
    --mod-cycle-hover-bg:   rgba(47, 95, 140, 0.08);
    --mod-more-color:       var(--text-muted);
    --mod-more-border:      var(--border-sep);
    --mod-more-hover-bg:    var(--bg-tag);

    /* ── Мета-строка ── */
    --meta-chip-border:         #c8c8c8;
    --meta-chip-color:          var(--text-muted);
    --meta-chip-hover-color:    var(--text-dim);
    --meta-chip-hover-border:   var(--border-post);
    --meta-report-color:        #fe640b;
    --meta-report-border:       rgba(207, 106, 46, 0.32);
    --meta-report-hover-color:  #d35400;
    --meta-report-hover-bg:     rgba(207, 106, 46, 0.10);

    /* ── Теги постов ── */
    --tag-pinned-bg:    rgba(111, 138, 58, 0.12);
    --tag-pinned-color: #40a02b;
    --tag-pinned-border:rgba(111, 138, 58, 0.32);
    --tag-locked-bg:    rgba(207, 106, 46, 0.10);
    --tag-locked-color: #fe640b;
    --tag-locked-border:rgba(207, 106, 46, 0.30);
    --tag-cyclic-bg:    rgba(47, 95, 140, 0.08);
    --tag-cyclic-color: #179299;
    --tag-cyclic-border:rgba(47, 95, 140, 0.28);
    --tag-nsfw-bg:      rgba(163, 59, 59, 0.08);
    --tag-nsfw-color:   #d20f39;
    --tag-nsfw-border:  rgba(163, 59, 59, 0.28);
    --tag-default-bg:   var(--bg-tag);
    --tag-default-color: #8839ef;
    --tag-default-border: color-mix(in srgb, var(--brand) 28%, transparent);

    /* ── OP-бейдж ── */
    --op-badge-bg:      rgba(111, 138, 58, 0.12);
    --op-badge-color:   #40a02b;
    --op-badge-border:  rgba(111, 138, 58, 0.32);

    /* ── Шапка ── */
    --hdr-badge-radius: 10px;
    --hdr-badge-font:   11px;
    --bg-meta:          rgba(51, 51, 51, 0.05);
    --hdr-link:         rgba(51,51,51,0.78);
    --hdr-link-hover:   #333333;
    --hdr-btn-color:    rgba(51,51,51,0.72);
    --hdr-btn-hover:    #333333;
    --hdr-btn-hover-bg: rgba(51,51,51,0.08);
    --hdr-border:       #cccccc;

    /* ── Донат: акцент = бренд ──────────────────────────── */
    --donate-accent:        var(--brand);
    --donate-accent-strong: var(--brand-700);
    --donate-accent-bg:     color-mix(in srgb, var(--brand) 10%, transparent);
    --donate-accent-border: color-mix(in srgb, var(--brand) 30%, transparent);

    /* ── Бейджи/акценты компонентов (ранее хардкод в board.css) ──── */
    --crimson-soft:     #8839ef;
    --fav-star:         #df8e1d;
    --fav-star-dim:     #b9761a;
    --opmod-color:      #179299;
    --opmod-bg:         rgba(38, 166, 154, 0.12);
    --opmod-border:     rgba(38, 166, 154, 0.32);
    --pc-badge-color:   #1e66f5;
    --pc-badge-bg:      rgba(47, 95, 140, 0.10);
    --pc-badge-bg-hover:rgba(47, 95, 140, 0.18);
    --pc-badge-border:  rgba(47, 95, 140, 0.28);
    --link:             var(--text-link);
    --via-color:        #7287fd;
    --via-bg:           rgba(110, 80, 160, 0.10);
    --via-border:       rgba(110, 80, 160, 0.30);
    --mod-edit-color:   #40a02b;
    --mod-edit-border:  rgba(111, 138, 58, 0.34);
    --mod-edit-hover-bg:rgba(111, 138, 58, 0.10);
    --fb-accent:        #df8e1d;
    --fb-accent-strong: #b9761a;
    --fb-accent-bg:     rgba(176, 140, 40, 0.12);

    /* ── Нейтральные слои (тени/скримы/текст на медиа) ──────────── */
    --scrim:            rgba(0, 0, 0, 0.55);
    --scrim-strong:     rgba(0, 0, 0, 0.62);
    --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.18);
    --shadow-xl:        0 12px 38px rgba(0, 0, 0, 0.20);
    --shadow-color:     rgba(0, 0, 0, 0.16);
    --ring-hairline:    rgba(0, 0, 0, 0.10);
    --on-media:         #ffffff;
}

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