/*
 * 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;
    /* Hover/pressed accent, for buttons that aren't Bootstrap .btn-primary
       (which has its own --bs-btn-active-bg). Same value. */
    --color-accent-hover: #8f1530;
    --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;
    --color-orange: #fd7e14;

    /* 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;
    /* Live Goal Meter editor (views/campaign/_live_goal.php): the deep teal of
       its design, used for its toggles, selections and publish button. */
    --color-goal-accent: #0F5A7E;
    --color-goal-accent-hover: #0B4865;
    --color-goal-accent-tint: #E8F1F6;
    --color-goal-live: #1E9E6A;
    --color-goal-live-tint: #E6F5EE;
    --color-goal-canvas: #EEF1F4;

    /* 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;
    /* Bootstrap 4's alert-warning palette, matching the three sets above — the
       amber state had no tokens, only --color-amber, which is a solid fill and
       unreadable behind dark text. */
    --color-alert-warning-bg: #fff3cd;
    --color-alert-warning-border: #ffeeba;
    --color-alert-warning-text: #856404;

    /* 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;
    /* For payloads, signatures and secrets — anything where the reader is
       comparing characters and a proportional font hides the difference
       between l, 1 and I. */
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --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;
}

/*
 * Extended palette — hue scales for UI that needs more than the semantic
 * tokens above (detail-page cards, badges, charts, the React admin pages).
 *
 * Before this existed, ported pages carried ~60 near-duplicate literals: three
 * different gray ramps (Tailwind's #111827…#f9fafb, Chakra's #1a202c…#f7fafc,
 * Bootstrap-era #666/#ddd/#eee), plus scattered blues, greens, reds and
 * ambers. They collapse onto these ramps (Tailwind v3's values, which most of
 * them already were). The React build's Tailwind theme reads ONLY these
 * variables (frontend/tailwind.config.js), so a colour changed here moves
 * both the legacy views and the Inertia pages.
 *
 * Prefer a semantic token (--color-text-muted, --color-border…) when one
 * says what you mean; reach for a ramp step when none does.
 */
:root {
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;

    --color-green-50: #ecfdf5;
    --color-green-100: #d1fae5;
    --color-green-200: #a7f3d0;
    --color-green-300: #6ee7b7;
    --color-green-400: #34d399;
    --color-green-500: #10b981;
    --color-green-600: #059669;
    --color-green-700: #047857;
    --color-green-800: #065f46;
    --color-green-900: #064e3b;

    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-200: #fecaca;
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;
    --color-red-900: #7f1d1d;

    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;

    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-300: #d8b4fe;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7e22ce;
    --color-purple-800: #6b21a8;
    --color-purple-900: #581c87;

    /* Chart series, in order. Canvas can't read CSS, so the React charts
       resolve these at runtime (frontend/src/lib/tokens.ts). Series 1 is the
       sidebar navy, the admin's anchor colour. */
    --color-chart-1: #152b4b;
    --color-chart-2: #2563eb;
    --color-chart-3: #059669;
    --color-chart-4: #d97706;
    --color-chart-5: #7c3aed;
    --color-chart-6: #dc2626;
    --color-chart-7: #0891b2;
    --color-chart-8: #be185d;
    --color-chart-9: #65a30d;
    --color-chart-10: #ea580c;

    /* Focus ring for inputs — the .filter-input:focus shadow in components.css. */
    --shadow-focus: 0 0 0 0.1rem rgba(21, 43, 75, 0.15);

    /* Brand colours fixed by a partner, not by us. */
    --color-brand-double-the-donation: #4cb573;
    --color-brand-double-the-donation-hover: #3da264;
    --color-brand-zelle: #6d1ed4;  /* zellepay.com */
    --color-brand-venmo: #008cff;  /* venmo.com/about/brand */
}