/* ============================================
   BIM Design System — CSS Variables
   ============================================
   Centralized color palette and design tokens.
   All CSS files should reference these variables
   instead of hard-coded values.
   ============================================ */

:root {

    /* === ACCENT / PRIMARY === */
    --bim-accent:             #FF0000;
    --bim-accent-hover:       #dc2626;
    --bim-accent-light:       rgba(255, 0, 0, 0.08);
    --bim-accent-border:      rgba(255, 0, 0, 0.3);

    /* === DARK / SURFACES === */
    --bim-dark:               #1A1A1A;
    --bim-dark-hover:         #262626;
    --bim-surface:            #ffffff;

    /* === BANNER DARK GRADIENT === */
    --banner-bg-dark:         #1A1A1A;   /* Banner gradient start — matches --bim-dark */
    --banner-bg-darker:       #2a2a2a;   /* Banner gradient end + timeline card bg — matches customer-banner.css */

    /* === TEXT === */
    --bim-text-primary:       #0f172a;
    --bim-text-secondary:     #475569;
    --bim-text-muted:         #64748b;
    --bim-text-faint:         #94a3b8;

    /* === BORDERS & DIVIDERS === */
    --bim-border:             #e2e8f0;
    --bim-border-light:       #f1f5f9;

    /* === BACKGROUNDS === */
    --bim-bg:                 #f1f5f9;
    --bim-bg-input:           #f8fafc;
    --bim-bg-hover:           #f1f5f9;
    --bim-bg-warm:            #faf8f5;     /* warm ivory — item summary boxes */
    --bim-bg-warm-alt:        #f5f6f8;     /* cool light slate-gray — breakdown sections */

    /* === SEMANTIC: SUCCESS === */
    --bim-success:            #0d9488;
    --bim-success-dark:       #0f766e;
    --bim-success-light:      #f0fdfa;
    --bim-success-border:     rgba(13, 148, 136, 0.2);

    /* === SEMANTIC: WARNING === */
    --bim-warning:            #f59e0b;
    --bim-warning-dark:       #b45309;
    --bim-warning-light:      #fef3c7;
    --bim-warning-border:     rgba(245, 158, 11, 0.3);

    /* === SEMANTIC: DANGER === */
    --bim-danger:             #ef4444;
    --bim-danger-light:       #fee2e2;

    /* === SEMANTIC: INFO === */
    --bim-info:               #6366f1;
    --bim-info-light:         #e0e7ff;

    /* === SEMANTIC: ORANGE (arriving / shipping) === */
    --bim-orange:             #f97316;
    --bim-orange-dark:        #c2410c;
    --bim-orange-light:       rgba(249, 115, 22, 0.1);

    /* === FOCUS STATES === */
    --bim-border-focus:       var(--bim-info);
    --bim-shadow-focus:       0 0 0 3px rgba(99, 102, 241, 0.08);

    /* === TYPOGRAPHY === */
    --bim-font:               "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* === FONT SIZES === */
    --bim-text-2xs:           0.5625rem;  /* 9px  — tiny private labels */
    --bim-text-xs:            0.625rem;   /* 10px — uppercase labels, badges */
    --bim-text-sm:            0.75rem;    /* 12px — small links, meta text */
    --bim-text-base:          0.875rem;   /* 14px — body text, inputs */
    --bim-text-lg:            1.125rem;   /* 18px — card titles, h3 */
    --bim-text-xl:            1.25rem;    /* 20px — section headers, h2 */
    --bim-text-2xl:           1.875rem;   /* 30px — page title, h1 */
    --bim-text-3xl:           2.25rem;    /* 36px — hero numbers (BOB total) */
    --bim-text-hero:          clamp(2.75rem, 5vw, 4rem); /* Responsive banner headline */

    /* === RADII === */
    --bim-radius-xs:          0.25rem;
    --bim-radius-sm:          0.5rem;
    --bim-radius:             0.75rem;
    --bim-radius-lg:          1rem;

    /* === SPACING === */
    --bim-space-1:            0.25rem;
    --bim-space-2:            0.5rem;
    --bim-space-3:            0.75rem;
    --bim-space-4:            1rem;
    --bim-space-5:            1.25rem;
    --bim-space-6:            1.5rem;
    --bim-space-8:            2rem;

    /* === SHADOWS === */
    --bim-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.08);
    --bim-shadow:             0 4px 12px rgba(0, 0, 0, 0.08);
    --bim-shadow-lg:          0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --bim-shadow-accent:      0 10px 15px -3px rgba(255, 0, 0, 0.3);
    --bim-shadow-accent-hover: 0 6px 16px -2px rgba(255, 0, 0, 0.35);
    --bim-shadow-warning:     0 2px 4px rgba(245, 158, 11, 0.1);

    /* === ICONS === */
    --bim-icon-sm:            1rem;       /* 16px — small inline icons */
    --bim-icon-base:          1.25rem;    /* 20px — default icon size */
    --bim-icon-lg:            1.5rem;     /* 24px — large icons */

    /* === TRANSITIONS === */
    --bim-transition-fast:    0.15s;
    --bim-transition-base:    0.2s;
    --bim-transition-slow:    0.3s;

    /* === BRAND: BOLIVIAN FLAG COLORS === */
    --bim-bolivia-red:          #E31E24;   /* Top stripe */
    --bim-bolivia-red-hover:    #c41a1f;   /* Darker red for hover states */
    --bim-bolivia-yellow:       #FCD116;   /* Middle stripe */
    --bim-bolivia-yellow-dark:  #D4A500;   /* Muted yellow for text on dark bg */
    --bim-bolivia-yellow-light: rgba(252, 209, 22, 0.15); /* Transit badge background */
    --bim-bolivia-green:        #007A3D;   /* Bottom stripe */
    --bim-bolivia-green-bright: #00A651;   /* Brighter green for text/icons */
}