/* Shared design tokens — used by both pipeline and review sections. */

:root {
    /* Surfaces — dark theme */
    --bg-0: #0e0e14;    /* page background */
    --bg-1: #12121c;    /* panel background */
    --bg-2: #1a1a2e;    /* input background / deep surface */
    --bg-3: #2a2a44;    /* borders / dividers */

    /* Foreground */
    --fg-0: #e8e8f0;    /* primary text */
    --fg-1: #aaa;       /* secondary text */
    --fg-2: #888;       /* tertiary / captions */

    /* Brand + semantic */
    --brand: #1976d2;
    --brand-2: #1565c0;
    --ok: #66bb6a;
    --warn: #ff9800;
    --err: #ef5350;

    /* Accents for category chips / category actions */
    --accent-teal: #00897b;
    --accent-purple: #7b1fa2;
    --accent-orange: #e65100;

    /* Shapes */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Type */
    --font-sm: 12px;
    --font-md: 13px;
    --font-lg: 14px;
    --font-xl: 18px;

    /* Effects */
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);
    --border: 1px solid var(--bg-3);

    /* Sidebar width (shared) */
    --sidebar-w: 240px;
    --header-h: 54px;
}