/* ================================================================
   Design Tokens
   ================================================================ */

:root {
    /* Text — navy-tinted instead of pure gray */
    --color-text: #0a2540;
    --color-text-secondary: #425466;
    --color-text-muted: #697386;
    --color-text-dim: #8792a2;
    --color-text-label: #596773;
    --color-text-nav: #697386;
    --color-text-disabled: #a3acb9;

    /* Accent — brand blue */
    --color-accent: #1a6ed8;
    --color-accent-hover: #1557b0;
    --color-accent-light: #e8f0fe;

    /* Backgrounds */
    --color-bg: #fff;
    --color-bg-page: #f6f9fc;
    --color-bg-sidebar: #1e3a5f;
    --color-bg-sidebar-hover: #2d5a85;
    --color-bg-sidebar-active: #3670a0;
    --color-bg-card: #fff;
    --color-bg-tile: #f6f9fc;
    --color-bg-hover: #f0f5fa;
    --color-bg-active: #e8f0fe;

    /* Borders */
    --color-border: #e3e8ee;
    --color-border-light: #edf2f7;
    --color-border-input: #c1c9d2;
    --color-border-tile: #e3e8ee;
    --color-toggle-bg: #c1c9d2;

    /* Sidebar palette (light-on-dark) */
    --color-sidebar-text: rgba(255, 255, 255, 0.72);
    --color-sidebar-text-hover: rgba(255, 255, 255, 0.92);
    --color-sidebar-text-active: #fff;
    --color-sidebar-icon: rgba(255, 255, 255, 0.45);
    --color-sidebar-icon-active: rgba(255, 255, 255, 0.85);
    --color-sidebar-border: rgba(255, 255, 255, 0.08);

    /* Status — slightly modernized */
    --color-status-success: #30b130;
    --color-status-success-bg: #e6f9e6;
    --color-status-error: #e25950;
    --color-status-error-bg: #fce8e6;
    --color-status-running: #1a6ed8;
    --color-status-running-bg: #e8f0fe;
    --color-status-warning: #e68a00;
    --color-status-warning-bg: #fef3e0;
    --color-status-pending: #8792a2;
    --color-status-pending-bg: #f0f3f7;

    /* Buttons — blue primary */
    --color-btn-bg: #1a6ed8;
    --color-btn-hover: #1557b0;
    --color-btn-disabled: #93c5fd;

    /* Shadows — Stripe's signature multi-layer */
    --shadow-card: 0 2px 5px rgba(50, 50, 93, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 6px 12px rgba(50, 50, 93, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    --shadow-btn: 0 1px 2px rgba(50, 50, 93, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
}