/* ==========================================================================
   base/variables.css — Design tokens
   Warm neutral canvas, graphite ink, muted indigo primary.
   Color carries meaning only; hierarchy comes from weight and spacing.
   ========================================================================== */

:root {
    /* ---- Canvas & surfaces (warm neutrals) ---- */
    --crm-bg: #f7f6f3;
    --crm-surface: #ffffff;
    --crm-surface-alt: #fbfaf8;
    --crm-surface-sunken: #f2f1ed;

    /* ---- Ink (warm graphite scale) ---- */
    --crm-ink: #21201c;
    --crm-text: #403e38;
    --crm-text-secondary: #5c5a52;
    --crm-text-muted: #79766c;
    --crm-text-faint: #a3a099;

    /* ---- Borders ---- */
    --crm-border: #e9e7e1;
    --crm-border-soft: #f0efea;
    --crm-border-strong: #d9d6ce;

    /* ---- Primary (muted indigo) ---- */
    --crm-primary: #4a5ac2;
    --crm-primary-hover: #3f4dab;
    --crm-primary-active: #364293;
    --crm-primary-soft: #eef0fa;
    --crm-primary-border: #d2d7f1;
    --crm-primary-ink: #38428f;

    /* ---- Sidebar (warm charcoal) ---- */
    --crm-sidebar-bg: #1b1a18;
    --crm-sidebar-border: #2b2a26;
    --crm-sidebar-hover: #262521;
    --crm-sidebar-active: #2e2d28;
    --crm-sidebar-text: #b8b5ac;
    --crm-sidebar-text-bright: #f0eee8;
    --crm-sidebar-muted: #716e64;
    --crm-sidebar-accent: #9aa4ec;
    --crm-sidebar-width: 236px;
    --crm-sidebar-width-collapsed: 64px;

    /* ---- Topbar ---- */
    --crm-topbar-height: 54px;

    /* ---- State (muted, meaning-only) ---- */
    --crm-success: #2e7d5b;
    --crm-success-bg: #edf6f1;
    --crm-success-border: #cfe7db;

    --crm-warning: #96691c;
    --crm-warning-bg: #faf4e5;
    --crm-warning-border: #ecdfbe;

    --crm-danger: #b0443a;
    --crm-danger-bg: #f9efed;
    --crm-danger-border: #eccfca;

    --crm-info: #3f5a94;
    --crm-info-bg: #eef2f8;
    --crm-info-border: #d4ddee;

    /* ---- Depth (soft, layered) ---- */
    --crm-shadow-xs: 0 1px 2px rgba(28, 27, 23, 0.05);
    --crm-shadow-sm: 0 1px 2px rgba(28, 27, 23, 0.04), 0 2px 6px rgba(28, 27, 23, 0.04);
    --crm-shadow-md: 0 2px 4px rgba(28, 27, 23, 0.04), 0 6px 16px rgba(28, 27, 23, 0.06);
    --crm-shadow-lg: 0 4px 8px rgba(28, 27, 23, 0.05), 0 16px 32px rgba(28, 27, 23, 0.08);

    /* ---- Geometry ---- */
    --crm-radius-sm: 6px;
    --crm-radius: 8px;
    --crm-radius-lg: 10px;

    /* ---- Type ---- */
    --crm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --crm-fs-xs: 0.6875rem;   /* 11px */
    --crm-fs-sm: 0.8125rem;   /* 13px */
    --crm-fs-base: 0.875rem;  /* 14px */
    --crm-fs-md: 0.9375rem;   /* 15px */
    --crm-fs-lg: 1.0625rem;   /* 17px */
    --crm-fs-xl: 1.25rem;     /* 20px */

    /* ---- Motion ---- */
    --crm-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --crm-fast: 120ms;
    --crm-normal: 180ms;

    /* ---- Bootstrap variable mapping ---- */
    --bs-body-bg: var(--crm-bg);
    --bs-body-color: var(--crm-text);
    --bs-body-font-family: var(--crm-font);
    --bs-border-color: var(--crm-border);
    --bs-primary: var(--crm-primary);
    --bs-primary-rgb: 74, 90, 194;
    --bs-success: var(--crm-success);
    --bs-success-rgb: 46, 125, 91;
    --bs-danger: var(--crm-danger);
    --bs-danger-rgb: 176, 68, 58;
    --bs-warning: var(--crm-warning);
    --bs-warning-rgb: 150, 105, 28;
    --bs-info: var(--crm-info);
    --bs-info-rgb: 63, 90, 148;
    --bs-link-color: var(--crm-primary);
    --bs-link-hover-color: var(--crm-primary-hover);
}