/*
 * WrenchFlow Design Tokens
 *
 * Single source of truth for the colour palette. Change values here to
 * re-theme the entire application.
 */

:root {
    /* ── Brand / Primary ─────────────────────────────────────── */
    --color-primary:       #3b82f6;
    --color-primary-hover: #2563eb;

    /* ── Text ────────────────────────────────────────────────── */
    --color-text:          #1e293b;
    --color-text-secondary:#475569;
    --color-text-muted:    #64748b;
    --color-text-faint:    #94a3b8;

    /* ── Backgrounds ─────────────────────────────────────────── */
    --color-bg:            #f5f5f5;
    --color-bg-card:       #fff;
    --color-bg-subtle:     #f1f5f9;
    --color-bg-hover:      #e2e8f0;

    /* ── Borders ─────────────────────────────────────────────── */
    --color-border:        #e2e8f0;
    --color-border-light:  #f1f5f9;

    /* ── Sidebar (dark) ──────────────────────────────────────── */
    --color-sidebar-bg:         #1e293b;
    --color-sidebar-hover:      #334155;
    --color-sidebar-border:     #334155;
    --color-sidebar-text:       #cbd5e1;
    --color-sidebar-text-muted: #64748b;
    --color-sidebar-text-bright:#f1f5f9;

    /* ── Semantic: success ────────────────────────────────────── */
    --color-success:       #166534;
    --color-success-bg:    #dcfce7;
    --color-success-border:#bbf7d0;

    /* ── Semantic: danger / error ─────────────────────────────── */
    --color-danger:        #991b1b;
    --color-danger-bg:     #fee2e2;
    --color-danger-border: #fecaca;
    --color-danger-btn:    #dc2626;
    --color-danger-btn-hover:#b91c1c;

    /* ── Semantic: warning ────────────────────────────────────── */
    --color-warning:       #854d0e;
    --color-warning-bg:    #fef9c3;
    --color-warning-border:#fde68a;

    /* ── Semantic: info ───────────────────────────────────────── */
    --color-info:          #1e40af;
    --color-info-bg:       #dbeafe;
    --color-info-border:   #bfdbfe;

    /* ── Status dots ──────────────────────────────────────────── */
    --color-status-idle:   #cbd5e1;
    --color-status-active: #eab308;
    --color-status-done:   #22c55e;

    /* ── Shadows ──────────────────────────────────────────────── */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* ── Radii ────────────────────────────────────────────────── */
    --radius:    6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill:10px;
}