/* BRK design tokens — colors, type scale, and weights */
:root {
    /* Font size scale */
    --font-size-badge:    0.65rem;   /* badges, section titles, tiny labels */
    --font-size-label:    0.7rem;    /* column headers, panel headers — always uppercase */
    --font-size-meta:     0.75rem;   /* meta/secondary text, descriptions, file hints, timestamps */
    --font-size-ui:       0.8rem;    /* buttons, table cells, toolbar controls, inputs */
    --font-size-nav:      0.85rem;   /* sidebar nav items, item sub-headings */
    --font-size-heading:  1rem;      /* panel/section headings */
    --font-size-brand:    1.1rem;    /* sidebar logo and username */
    --font-size-title:    1.35rem;   /* topbar page title */
    --font-size-display:  1.9rem;    /* hero stat numbers */

    /* Font weights */
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;

    /* Chrome (dark surfaces) */
    --color-sidebar:              #111;
    --color-header:               #2c2c2c;
    --color-header-hover:         #3a3a3a;
    --color-dark-btn-hover:       #222;
    --color-action:               #000;

    /* Content surfaces */
    --color-page-bg:              #d4d4d4;
    --color-surface:              #fff;
    --color-surface-subtle:       #f7f7f7;

    /* Brand accent */
    --color-accent:               #EFFF00;
    --color-accent-success:       #0F0;
    --color-accent-danger:        #F00;

    /* Text on dark */
    --color-on-dark:              #fff;
    --color-on-dark-85:           rgba(255,255,255,0.85);
    --color-on-dark-70:           rgba(255,255,255,0.7);
    --color-on-dark-55:           rgba(255,255,255,0.55);
    --color-on-dark-25:           rgba(255,255,255,0.25);

    /* Text on light */
    --color-text-primary:         #111;
    --color-text-secondary:       #444;
    --color-text-meta:            #888;
    --color-text-body:            #666;
    --color-text-cell:            #333;
    --color-text-empty:           #ccc;
    --color-text-placeholder:     #bbb;

    /* Borders: dark surfaces */
    --color-border-dark-btn:      rgba(255,255,255,0.35);
    --color-border-dark-divider:  rgba(255,255,255,0.14);
    --color-border-dark-col:      rgba(255,255,255,0.08);

    /* Borders: light surfaces */
    --color-border:               #d8d8d8;
    --color-border-sep:           #e8e8e8;
    --color-border-row:           #f0f0f0;

    /* Row backgrounds */
    --color-row-hover:            #fafafa;
    --color-row-stripe:           #f9f9f9;
    --color-row-stripe-hover:     #f5f5f5;
    --color-row-active:           #fafff0;

    /* Danger (delete button) */
    --color-danger:               #c00;
    --color-border-danger:        #f5c6c6;
    --color-bg-danger:            #fff5f5;    
    
    /* Success */
    --color-success:              #0c0;

    /* Nav interaction */
    --color-nav-hover-bg:         rgba(255,255,255,0.05);
    --color-nav-hover-text:       rgba(255,255,255,0.9);
    --color-nav-active-bg:        rgba(239,255,0,0.06);

    /* Log level colors */
    --color-log-debug-bg:       #f0f0f0;
    --color-log-debug-text:     #888;
    --color-log-info-bg:        #e8f0fe;
    --color-log-info-text:      #1a56c4;
    --color-log-warning-bg:     #fff8e1;
    --color-log-warning-text:   #b45309;
    /* error reuses --color-bg-danger / --color-border-danger / --color-danger */
    --color-log-critical-bg:    #c00;
    --color-log-critical-text:  #fff;

    /* Panel action button hover */
    --color-panel-btn-hover-bg:     rgba(255,255,255,0.1);
    --color-panel-btn-hover-border: rgba(255,255,255,0.6);
}