/*
 * Design tokens — centralized values for the admin/internal UI.
 *
 * Resolved values intentionally match the historical hardcoded values used
 * across main.css / site.css so adopting tokens is a visual no-op. Update
 * tokens here to roll changes through the admin design language.
 *
 * Public/donor-facing surfaces (donation form, checkout, web elements,
 * campaign pages, donor portal, receipts) are intentionally NOT migrated
 * to these tokens and keep their own styles.
 */

:root {
    /* Brand / accent */
    --accent-color: #b91b3b;
    --bs-btn-active-bg: #8f1530;

    /* Neutral palette */
    --color-bg-app: #F7F7F8;
    --color-bg-surface: #FFFFFF;
    --color-bg-sidebar: #152b4b;
    --color-bg-table-header: #152b4b;
    --color-bg-row-alt: #F4F8FB;
    --color-bg-row-hover: #D6E2EC;
    --color-bg-table-hover: #e8f4f8;
    --color-bg-form-column: #f4f8fb;
    --color-bg-faint: #fbfcfd;
    --color-bg-light: #f8f9fa;
    --color-bg-disabled: #C3C2C2;
    --color-bg-tooltip: #212529;

    /* Text */
    --color-text-default: #203D4C;
    --color-text-strong: #111928;
    --color-text-secondary: #6c757d;
    --color-text-emphasis: #495057;
    --color-text-muted: #999;
    --color-text-on-dark: #ffffff;
    --color-link: #1E7FC6;

    /* Borders */
    --color-border: #CBDAE2;
    --color-border-subtle: #dddee4;
    --color-border-light: #e9ecef;
    --color-border-mid: #dee2e6;
    --color-border-hover: #adb5bd;

    /* Feedback */
    --color-error-text: #a94442;
    --color-error-bg: #fdf7f7;
    --color-error-border: #eed3d7;
    --color-not-set: #c55;

    /* Status hues (Bootstrap-4-derived; used by status icons/badges) */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-warning: #ffc107;

    /* Detail-page accent palette (Tailwind-derived; .action-btn-*, .badge-*) */
    --color-blue: #3b82f6;
    --color-blue-hover: #2563eb;
    --color-blue-tint: #eff6ff;
    --color-blue-border: #bfdbfe;
    --color-green: #10b981;
    --color-green-hover: #059669;
    --color-red: #ef4444;
    --color-red-hover: #dc2626;
    --color-red-tint: #fef2f2;
    --color-red-border: #fecaca;
    --color-purple: #a855f7;
    --color-purple-hover: #9333ea;
    --color-amber: #f59e0b;
    --color-gray-disabled: #9ca3af;
    --color-accent-navy: #2d4b82;

    /* Third-party brand colors. Exempt from the "no new hex" rule because they
       are fixed by the vendor, but they still live here rather than in views. */
    --color-brand-salesforce: #00a1e0;
    --color-brand-salesforce-hover: #008fc7;

    /* Inline alert palette (.message-alert, .status-connected/-disconnected) */
    --color-alert-success-bg: #d4edda;
    --color-alert-success-border: #c3e6cb;
    --color-alert-success-text: #155724;
    --color-alert-danger-bg: #f8d7da;
    --color-alert-danger-border: #f5c6cb;
    --color-alert-danger-text: #721c24;
    --color-alert-info-bg: #d1ecf1;
    --color-alert-info-border: #bee5eb;
    --color-alert-info-text: #0c5460;

    /* Radii */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Shadows */
    --shadow-card: 0px 1px 4px rgba(19, 126, 199, 0.2);
    --shadow-card-strong: 0px 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-sidebar: 2px 1px 4px -2px rgba(19, 126, 199, 0.4);

    /* Typography */
    --font-family-base: avenirnext;
    --font-family-medium: avenirnext-medium;
    --font-size-base: 1rem;
    --font-size-sm: 14px;
    --font-size-xs: 13px;
    --font-size-menu: 18px;
    --font-size-campaign-title: 17px;

    /* Layout */
    --sidebar-width: 250px;

    /*
     * Spacing scale (4px base, Tailwind-style numbering: --space-N = N*4px).
     * Use for gap/padding/margin in admin views and components. Off-scale
     * values (e.g. 6px control padding) stay literal rather than inventing
     * half-steps.
     */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
}

/*
 * Bootstrap 5.3 bridge — remap Bootstrap's global variables onto the tokens
 * above so Bootstrap-native components and our custom components resolve to
 * one palette. tokens.css loads after bootstrap.css (AppAsset depends on
 * BootstrapAsset), so these :root declarations win.
 *
 * Deliberately NOT bridged: --bs-primary / --bs-success / --bs-danger /
 * --bs-warning and their utilities (.text-*, .bg-*, .btn-outline-*). Views
 * were designed against Bootstrap's hues for those; remapping them to the
 * accent/status tokens is a visual redesign, not tokenization.
 */
:root {
    /* Body & text */
    --bs-body-color: var(--color-text-default);
    --bs-body-color-rgb: 32, 61, 76;
    --bs-body-bg: var(--color-bg-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-font-family: var(--font-family-base);
    --bs-emphasis-color: var(--color-text-strong);
    --bs-emphasis-color-rgb: 17, 25, 40;
    --bs-secondary-color: var(--color-text-secondary);
    --bs-secondary-color-rgb: 108, 117, 125;

    /* Surfaces (values match Bootstrap defaults — pure aliasing) */
    --bs-secondary-bg: var(--color-border-light);
    --bs-tertiary-bg: var(--color-bg-light);

    /* Borders & radii */
    --bs-border-color: var(--color-border-subtle);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);

    /* Links */
    --bs-link-color: var(--color-link);
    --bs-link-color-rgb: 30, 127, 198;
    --bs-link-hover-color: #18669e;
    --bs-link-hover-color-rgb: 24, 102, 158;
}