/* ══════════════════════════════════════════════════════════════════════
   BG Community Market — Design Tokens & Base Styles
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand colors ── */
    --bg-primary:        #255A2A;
    --bg-primary-light:  #659948;
    --bg-primary-dark:   #1a4220;
    --bg-accent:         #659948;
    --bg-accent-light:   #7db356;
    --bg-warning:        #f39c12;
    --bg-danger:         #e74c3c;

    /* ── Surface colors ── */
    --bg-surface:        #ffffff;
    --bg-surface-alt:    #f4f6f9;
    --bg-surface-hover:  #eaecf0;
    --bg-border:         #d5d8dc;
    --bg-commands-bg:    #EEF0EE;

    /* ── Text ── */
    --bg-text:           #2c3e50;
    --bg-text-secondary: #7f8c8d;
    --bg-text-on-primary:#ffffff;
    --bg-text-icon:      #434344;

    /* ── Shell layout ── */
    --bg-header-bg:      var(--bg-primary);
    --bg-header-fg:      var(--bg-text-on-primary);
    --bg-commands-bar-bg: var(--bg-commands-bg);
    --bg-explorer-bg:    var(--bg-surface-alt);
    --bg-explorer-width: 280px;
    --bg-info-bg:        var(--bg-surface-alt);
    --bg-info-width:     0px;
    --bg-footer-bg:      #EEF0EE;
    --bg-footer-fg:      #000000;

    /* ── Typography ── */
    --bg-font-family:    'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --bg-font-size:      14px;
    --bg-font-size-sm:   12px;
    --bg-font-size-lg:   16px;
    --bg-font-size-h1:   24px;
    --bg-font-size-h2:   20px;

    /* ── Spacing ── */
    --bg-space-xs:       0.25rem;
    --bg-space-sm:       0.5rem;
    --bg-space-md:       1rem;
    --bg-space-lg:       1.5rem;
    --bg-space-xl:       2rem;

    /* ── Radius ── */
    --bg-radius:         4px;
    --bg-radius-lg:      8px;
}

/* ── Reset & base ── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--bg-font-family);
    font-size: var(--bg-font-size);
    color: var(--bg-text);
    background: var(--bg-surface);
    height: 100%;
}

h1 { font-size: var(--bg-font-size-h1); font-weight: 600; margin: 0 0 var(--bg-space-md); }
h2 { font-size: var(--bg-font-size-h2); font-weight: 600; margin: 0 0 var(--bg-space-sm); }

a { color: var(--bg-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utility classes ── */
.text-muted { color: var(--bg-text-secondary); }
.text-danger { color: var(--bg-danger); }
.text-success { color: var(--bg-accent); }

.bg-busy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bg-space-xl);
    color: var(--bg-text-secondary);
}