/* =============================================================
   StrategyOne — Design Tokens
   Single source of truth. No themes, no dark mode switching.
   ============================================================= */

:root {

    /* ─── Layout ─────────────────────────────────────────── */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --header-height: 48px;

    /* ─── Sidebar (dark) ─────────────────────────────────── */
    --sidebar-bg-color:      #0f172a;
    --sidebar-bg-item:       transparent;
    --sidebar-text-color:    #94a3b8;
    --sidebar-hover-bg:      rgba(255, 255, 255, 0.07);
    --sidebar-active-bg:     #3b82f6;
    --sidebar-active-text:   #ffffff;
    --sidebar-border:        rgba(255, 255, 255, 0.06);

    /* ─── Header ─────────────────────────────────────────── */
    --header-bg-color:       #ffffff;   /* right/content side */
    --header-border:         #e2e8f0;
    /* Note: header-left (brand area) uses --sidebar-bg-color */

    /* ─── Page background ────────────────────────────────── */
    --background-color:      #f1f5f9;
    --background-color2:     #e2e8f0;

    /* ─── Cards & surfaces ───────────────────────────────── */
    --card-bg-color:         #ffffff;
    --input-bg-color:        #ffffff;
    --footer-bg-color:       #ffffff;
    --card-gradient:         none;
    --card-border:           #e2e8f0;
    --card-hover-bg:         #f8fafc;
    --card-hover-border:     #3b82f6;

    /* ─── Text ───────────────────────────────────────────── */
    --text-color:            #0f172a;
    --text-muted:            #64748b;
    --status-text-color:     #0f172a;
    --brand-text-color:      #0f172a;
    --heading-color:         #0f172a;

    /* ─── Borders ────────────────────────────────────────── */
    --border-color:          #e2e8f0;
    --border_glow:           #3b82f6;

    /* ─── Accent ─────────────────────────────────────────── */
    --accent-color:          #3b82f6;
    --accent-hover-color:    #2563eb;
    --accent-text:           #ffffff;

    /* ─── Buttons ────────────────────────────────────────── */
    --btn-bg:                #3b82f6;
    --btn-text:              #ffffff;
    --btn-primary-bg:        #3b82f6;
    --btn-primary-bg2:       #2563eb;
    --btn-primary-text:      #ffffff;
    --btn-secondary-bg:      #f1f5f9;
    --btn-secondary-text:    #475569;
    --btn-danger-bg:         #dc2626;
    --btn-danger-bg2:        #ef4444;
    --btn-danger-text:       #ffffff;

    /* ─── Tables ─────────────────────────────────────────── */
    --table-row-even:        #ffffff;
    --table-row-odd:         #f8fafc;
    --table-row-hover:       rgba(59, 130, 246, 0.05);
    --table-header-bg:       #f8fafc;
    --table-header-text:     #475569;

    /* ─── Dropdowns ──────────────────────────────────────── */
    --dropdown-bg:           #ffffff;
    --dropdown-text:         #0f172a;
    --dropdown-hover:        #f1f5f9;

    /* ─── Pagination ─────────────────────────────────────── */
    --pagination-active-bg:     #3b82f6;
    --pagination-active-text:   #ffffff;
    --pagination-active-border: #2563eb;

    /* ─── Shadows ────────────────────────────────────────── */
    --card-shadow:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --hover-shadow:  0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    --active-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);

    /* ─── Charts ─────────────────────────────────────────── */
    --chart-border: #3b82f6;
    --chart-bg:     rgba(59, 130, 246, 0.08);
    --chart-point:  #3b82f6;
    --chart-grid:   rgba(0, 0, 0, 0.04);
    --chart-text:   #64748b;

    /* ─── Border radius ──────────────────────────────────── */
    --radius-sm:    4px;
    --radius:       6px;
    --radius-lg:    10px;
    --border-radius: 6px;   /* alias used by existing components */

    /* ─── Transitions ────────────────────────────────────── */
    --transition-speed: 0.2s;

    /* ─── Typography ─────────────────────────────────────── */
    --base-font-size:      16px;
    --heading-font-size:   1.75rem;
    --index-title-size:    1.5rem;
    --body-font-family:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --heading-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --nav-font-family:     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --brand-font-family:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ─── Misc (keep for backward compat) ────────────────── */
    --hamburger-icon-color: #94a3b8;
    --primary-color:        #3b82f6;
}