/* ================================================================
   PayHub Design Tokens — единая палитра, идентичная PayScrowing
   ================================================================ */

:root {
    /* ── Brand colours ─────────────────────────────────────── */
    --ph-color-primary:         #177dff;
    --ph-color-secondary:       #716aca;
    --ph-color-accent:          #3b2a6e;
    --ph-color-link:            #1572E8;
    --ph-color-success:         #35cd3a;
    --ph-color-warning:         #ffa534;
    --ph-color-danger:          #f3545d;
    --ph-color-info:            #36a3f7;

    /* ── Text ──────────────────────────────────────────────── */
    --ph-text-primary:          #2A2F5B;
    --ph-text-secondary:        #575962;
    --ph-text-muted:            #95aac9;
    --ph-text-inverse:          #ffffff;

    /* ── Backgrounds ───────────────────────────────────────── */
    --ph-bg-body:               #f8f9fa;
    --ph-bg-card:               #ffffff;
    --ph-bg-topbar:             #ffffff;
    --ph-bg-sidebar:            #3b2a6e;
    --ph-bg-sidebar-end:        #1a1035;
    --ph-bg-sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --ph-bg-sidebar-item-active:rgba(255, 255, 255, 0.14);

    /* ── Borders ───────────────────────────────────────────── */
    --ph-border-color:          #ddd9f0;
    --ph-border-radius:         12px;
    --ph-border-radius-sm:      8px;
    --ph-border-radius-pill:    14px;

    /* ── Glass pill (top-bar nav) ──────────────────────────── */
    --ph-glass-bg:              rgba(100, 80, 200, 0.07);
    --ph-glass-border:          rgba(130, 110, 210, 0.38);

    /* ── Typography ────────────────────────────────────────── */
    --ph-font-family:           'Roboto', sans-serif;
    --ph-font-size-base:        14px;
    --ph-font-weight-normal:    400;
    --ph-font-weight-medium:    500;
    --ph-font-weight-bold:      600;

    /* ── Shadows ───────────────────────────────────────────── */
    --ph-shadow-sm:             0 1px 4px rgba(40, 20, 80, 0.08);
    --ph-shadow-md:             0 2px 16px rgba(40, 20, 80, 0.10), 0 1px 4px rgba(0,0,0,0.06);
    --ph-shadow-lg:             0 8px 32px rgba(40, 20, 80, 0.16);

    /* ── Topbar ────────────────────────────────────────────── */
    --ph-topbar-height:         3.5rem;
    --ph-topbar-shadow:         0 1px 0 var(--ph-border-color), 0 2px 8px rgba(40, 20, 80, 0.06);
}

/* ── Dark mode overrides ──────────────────────────────────── */
html.app-dark {
    --ph-text-primary:          #c9d1d9;
    --ph-text-secondary:        #8b949e;
    --ph-text-muted:            #6e7681;
    --ph-bg-body:               #0d1117;
    --ph-bg-card:               #161b22;
    --ph-bg-topbar:             #161b22;
    --ph-bg-sidebar:            #161b22;
    --ph-bg-sidebar-end:        #0d1117;
    --ph-bg-sidebar-item-hover: rgba(255, 255, 255, 0.06);
    --ph-bg-sidebar-item-active:rgba(255, 255, 255, 0.10);
    --ph-border-color:          #30363d;
    --ph-glass-bg:              rgba(255, 255, 255, 0.045);
    --ph-glass-border:          rgba(255, 255, 255, 0.10);
    --ph-topbar-shadow:         0 1px 0 var(--ph-border-color);
    --ph-shadow-md:             0 2px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Bootstrap override: use token colours ────────────────── */
:root {
    --bs-primary:               var(--ph-color-primary);
    --bs-secondary:             var(--ph-color-secondary);
    --bs-success:               var(--ph-color-success);
    --bs-danger:                var(--ph-color-danger);
    --bs-warning:               var(--ph-color-warning);
    --bs-info:                  var(--ph-color-info);
    --bs-body-font-family:      var(--ph-font-family);
    --bs-body-font-size:        var(--ph-font-size-base);
    --bs-body-color:            var(--ph-text-primary);
    --bs-body-bg:               var(--ph-bg-body);
}
html.app-dark {
    --bs-body-color:            var(--ph-text-primary);
    --bs-body-bg:               var(--ph-bg-body);
}