/*
 * BVC Shopping Cart — Design Tokens (CSS Custom Properties)
 * =========================================================
 * Cheryl: Change ANY color, font, or spacing here and it updates
 * across the entire shopping cart automatically.
 *
 * You can also override these in Appearance > Customize > Additional CSS
 * or via the BVC Customizer panel (Appearance > Customize > BVC Shopping Cart).
 *
 * Example override in Additional CSS:
 *   :root { --bvc-accent: #ff6600; }
 */

:root {
    /* ── Brand Colors ── */
    --bvc-dark:             #1a2332;   /* Dark navy — headers, buttons, text */
    --bvc-accent:           #4ecdc4;   /* Teal — links, hovers, accents */
    --bvc-white:            #ffffff;
    --bvc-light-bg:         #f9f9f9;   /* Light background for cards */
    --bvc-border:           #e0e0e0;   /* Default border color */
    --bvc-border-input:     #d0d0d0;   /* Input field borders */
    --bvc-text:             #1a2332;   /* Primary text color */
    --bvc-text-muted:       #666666;   /* Secondary/muted text */
    --bvc-text-light:       #888888;   /* Light text (notes, captions) */
    --bvc-error:            #e74c3c;   /* Required asterisks, errors */

    /* ── Status Colors ── */
    --bvc-success:          #28a745;   /* Approved, success states */
    --bvc-warning:          #ffc107;   /* Pending, warning states */
    --bvc-warning-bg:       #fff3cd;   /* Warning background */
    --bvc-warning-text:     #856404;   /* Warning text */
    --bvc-danger:           #dc3545;   /* Rejected, error states */

    /* ── Typography ── */
    --bvc-font-family:      inherit;   /* Inherits from your theme */
    --bvc-font-size-sm:     12px;
    --bvc-font-size-base:   14px;
    --bvc-font-size-md:     16px;
    --bvc-font-size-lg:     24px;

    /* ── Spacing ── */
    --bvc-radius:           4px;       /* Border radius for buttons/inputs */
    --bvc-radius-lg:        8px;       /* Border radius for cards */
    --bvc-shadow:           0 2px 12px rgba(0, 0, 0, 0.06);
    --bvc-shadow-hover:     0 4px 12px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --bvc-transition-fast:  0.2s ease;
    --bvc-transition:       0.3s ease;
    --bvc-transition-slow:  0.5s ease-in-out;
}