/* ── Дизайн-токены (CSS custom properties) ── */
:root {
    /* Surfaces */
    --c-page:           248 250 249;
    --c-surface:        255 255 255;
    --c-surface-alt:    237 242 240;
    --c-surface-subtle: 244 246 245;

    /* Borders */
    --c-border:         222 230 227;
    --c-border-strong:  200 212 207;
    --c-border-faint:   228 233 231;

    /* Text */
    --c-text-primary:   30  40  38;
    --c-text:           45  56  53;
    --c-text-label:     56  70  67;
    --c-text-heading:   71  88  85;
    --c-text-secondary: 92  110 104;
    --c-text-muted:     122 142 136;
    --c-text-dim:       162 176 171;
    --c-text-faint:     201 210 207;
    --c-text-black:     17  29  26;

    /* Brand surfaces */
    --c-brand-light:    237 245 243;
    --c-brand-surface:  214 234 230;
    --c-brand-text:     30  69  64;

    /* Status backgrounds */
    --c-success-bg:     238 246 242;
    --c-warning-bg:     254 248 239;
    --c-error-bg:       254 242 240;
    --c-info-bg:        239 245 248;
}

.dark {
    /* Surfaces */
    --c-page:           19  28  26;
    --c-surface:        26  39  37;
    --c-surface-alt:    33  50  48;
    --c-surface-subtle: 29  43  40;

    /* Borders */
    --c-border:         45  64  60;
    --c-border-strong:  55  75  71;
    --c-border-faint:   38  54  50;

    /* Text */
    --c-text-primary:   228 233 231;
    --c-text:           201 210 207;
    --c-text-label:     162 176 171;
    --c-text-heading:   182 194 190;
    --c-text-secondary: 142 160 153;
    --c-text-muted:     112 132 126;
    --c-text-dim:       82  100 94;
    --c-text-faint:     62  78  73;
    --c-text-black:     238 243 241;

    /* Brand surfaces */
    --c-brand-light:    15  45  42;
    --c-brand-surface:  22  53  48;
    --c-brand-text:     174 213 205;

    /* Status backgrounds */
    --c-success-bg:     20  50  35;
    --c-warning-bg:     50  40  20;
    --c-error-bg:       55  25  22;
    --c-info-bg:        20  38  50;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Theme toggle icons ── */
.dark-icon-sun  { display: none; }
.dark-icon-moon { display: block; }
.dark .dark-icon-sun  { display: block; }
.dark .dark-icon-moon { display: none; }

/* ── HTMX transitions ── */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-added    { opacity: 0; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-in; }

/* ── Theme transition ── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}

/* ── Button components ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border-radius: 0.75rem;
    transition: all 200ms ease;
    cursor: pointer;
    text-decoration: none;
}

/* Sizes */
.btn-base { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.5rem; }
.btn-md { padding: 0.625rem 1.25rem; font-size: 0.875rem; border-radius: 0.5rem; }
.btn-full { display: flex; width: 100%; text-align: center; }

/* Primary */
.btn-primary { color: #fff; background-color: #326D64; font-weight: 600; }
.btn-primary:hover { background-color: #285A52; }
.dark .btn-primary { background-color: #3A8D7F; color: #fff; }
.dark .btn-primary:hover { background-color: #4AA090; }
.btn-primary-shadow { box-shadow: 0 10px 15px -3px rgba(50, 109, 100, 0.2); }
.btn-primary-shadow:hover { box-shadow: 0 10px 15px -3px rgba(50, 109, 100, 0.3); }
.dark .btn-primary-shadow { box-shadow: 0 10px 15px -3px rgba(58, 141, 127, 0.35); }
.dark .btn-primary-shadow:hover { box-shadow: 0 10px 15px -3px rgba(58, 141, 127, 0.5); }

/* Secondary */
.btn-secondary { color: rgb(var(--c-text-primary)); background: transparent; border: 1px solid rgb(var(--c-border-strong)); }
.btn-secondary:hover { border-color: #82BDB3; color: #5EA39A; background-color: rgb(var(--c-brand-light) / 0.5); }
.dark .btn-secondary:hover { border-color: #5EA39A; color: #82BDB3; }

/* Accent */
.btn-accent { color: #fff; background-color: #C8865E; font-weight: 600; }
.btn-accent:hover { background-color: #AB6F4A; }
.dark .btn-accent { background-color: #D99B7A; color: #1a1a1a; }
.dark .btn-accent:hover { background-color: #E8B99A; }

/* Success */
.btn-success { color: #fff; background-color: #059669; font-weight: 600; }
.btn-success:hover { background-color: #047857; }
.dark .btn-success { background-color: #10b981; }
.dark .btn-success:hover { background-color: #34d399; }

/* Sky */
.btn-sky { color: #fff; background-color: #0ea5e9; font-weight: 600; }
.btn-sky:hover { background-color: #0284c7; }
.dark .btn-sky { background-color: #38bdf8; color: #1a1a1a; }
.dark .btn-sky:hover { background-color: #7dd3fc; }

/* Danger */
.btn-danger { color: #B85C4A; background: transparent; border: 1px solid #C8865E; }
.btn-danger:hover { background-color: rgba(184, 92, 74, 0.08); border-color: #B85C4A; }
.dark .btn-danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
.dark .btn-danger:hover { background-color: rgba(239, 68, 68, 0.1); border-color: #f87171; }

/* ── Footer zone: always dark ── */
.footer-zone {
    --c-text:           45  56  53;
    --c-text-primary:   228 233 231;
    --c-text-label:     56  70  67;
    --c-text-heading:   71  88  85;
    --c-text-secondary: 122 142 136;
    --c-text-muted:     162 176 171;
    --c-text-dim:       182 194 190;
    --c-text-faint:     201 210 207;
    --c-page:           228 233 231;
    --c-surface:        248 250 249;
    --c-surface-alt:    237 242 240;
    --c-border:         56  70  67;
    --c-border-faint:   45  56  53;
}

/* ── Dark mode badge overrides ── */
.dark .badge-email       { background: rgba(59,130,246,.15); color: #93bbfd; }
.dark .badge-telegram    { background: rgba(14,165,233,.15); color: #7dd3fc; }
.dark .badge-phone       { background: rgba(16,185,129,.15); color: #6ee7b7; }
.dark .badge-heartbeat   { background: rgba(34,197,94,.15);  color: #86efac; }
.dark .badge-unverified  { background: rgba(234,179,8,.15);  color: #fde047; }
.dark .badge-error       { background: rgba(239,68,68,.15);  color: #fca5a5; }
.dark .badge-warning     { background: rgba(234,179,8,.15);  color: #fde047; }

/* ── Dark mode Tailwind utility overrides ── */
/* Yellow */
.dark .bg-yellow-50   { background-color: rgba(234,179,8,.12) !important; }
.dark .text-yellow-800 { color: #fde68a !important; }
.dark .text-yellow-600 { color: #fcd34d !important; }
.dark .text-yellow-700 { color: #fbbf24 !important; }
.dark .border-yellow-500 { border-color: rgba(234,179,8,.4) !important; }
.dark .bg-yellow-400  { background-color: #ca8a04 !important; }

/* Red */
.dark .bg-red-50      { background-color: rgba(239,68,68,.12) !important; }
.dark .text-red-700   { color: #fca5a5 !important; }
.dark .text-red-500   { color: #f87171 !important; }
.dark .text-red-400   { color: #f87171 !important; }
.dark .border-red-500 { border-color: rgba(239,68,68,.4) !important; }
.dark .border-red-800 { border-color: rgba(239,68,68,.3) !important; }

/* Green */
.dark .bg-green-50    { background-color: rgba(34,197,94,.12) !important; }
.dark .bg-green-100   { background-color: rgba(34,197,94,.15) !important; }
.dark .text-green-700 { color: #86efac !important; }
.dark .text-green-600 { color: #4ade80 !important; }
.dark .text-green-400 { color: #4ade80 !important; }
.dark .border-green-500 { border-color: rgba(34,197,94,.4) !important; }

/* Blue */
.dark .bg-blue-100    { background-color: rgba(59,130,246,.15) !important; }
.dark .text-blue-700  { color: #93bbfd !important; }

/* Sky */
.dark .bg-sky-100     { background-color: rgba(14,165,233,.15) !important; }
.dark .text-sky-700   { color: #7dd3fc !important; }

/* Emerald */
.dark .bg-emerald-100 { background-color: rgba(16,185,129,.15) !important; }
.dark .text-emerald-700 { color: #6ee7b7 !important; }

/* Admin status badges (semi-transparent) */
.dark .bg-green-500\/10 { background-color: rgba(34,197,94,.15) !important; }
.dark .bg-green-500\/20 { background-color: rgba(34,197,94,.2) !important; }
.dark .bg-red-500\/20   { background-color: rgba(239,68,68,.2) !important; }
.dark .bg-yellow-500\/20 { background-color: rgba(234,179,8,.2) !important; }
.dark .text-green-300   { color: #86efac !important; }
.dark .text-red-300     { color: #fca5a5 !important; }
.dark .text-yellow-400  { color: #fde047 !important; }

/* Sage → brand alias for legacy usage */
.dark .bg-sage-600  { background-color: #3A8D7F !important; }
.dark .bg-sage-700  { background-color: #4AA090 !important; }
.dark .text-sage-400 { color: #82BDB3 !important; }

/* ── Letter preview dark mode ── */
.dark .letter-preview { color: rgb(var(--c-text)); }
.dark .letter-preview .trix-content blockquote { border-left-color: rgb(var(--c-border-strong)); color: rgb(var(--c-text-secondary)); }
.dark .letter-preview .trix-content a { color: #82BDB3; }
.dark .letter-preview .trix-content pre { background: rgb(var(--c-surface-alt)); color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-border-faint)); }