/**
 * BusinessIA — Design Tokens
 *
 * Centralized CSS custom properties for the entire theme.
 * All colors, fonts, spacing, shadows, and transitions in one place.
 */

:root {
    /* ===== Colors: Background ===== */
    --bi-bg-page:       #0a0a0a;
    --bi-bg-card:       #1a1a1a;
    --bi-bg-sidebar:    #111111;
    --bi-bg-elevated:   #222222;
    --bi-bg-footer:     #050505;

    /* ===== Colors: Borders ===== */
    --bi-border:        #2a2a2a;
    --bi-border-light:  #333333;
    --bi-border-hover:  #444444;
    --bi-border-focus:  #d4a017;

    /* ===== Colors: Brand (Gold) ===== */
    --bi-gold:          #d4a017;
    --bi-gold-light:    #f0c040;
    --bi-gold-dark:     #b8860b;
    --bi-gold-gradient: linear-gradient(90deg, #d4a017, #f0c040);

    /* ===== Colors: Text ===== */
    --bi-text-primary:   #ffffff;
    --bi-text-secondary: #cccccc;
    --bi-text-muted:     #999999;
    --bi-text-subtle:    #888888;
    --bi-text-dim:       #666666;
    --bi-text-faint:     #555555;

    /* ===== Colors: Semantic ===== */
    --bi-success:       #4caf50;
    --bi-error:         #ff6b6b;
    --bi-warning:       #ffb347;

    /* ===== Typography ===== */
    --bi-font-heading:  'Playfair Display', Georgia, serif;
    --bi-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ===== Font Sizes (responsive with clamp) ===== */
    --bi-text-xs:       0.75rem;
    --bi-text-sm:       0.85rem;
    --bi-text-base:     0.95rem;
    --bi-text-md:       1rem;
    --bi-text-lg:       1.1rem;
    --bi-text-xl:       clamp(1.2rem, 1.5vw, 1.4rem);
    --bi-text-2xl:      clamp(1.4rem, 2vw, 1.8rem);
    --bi-text-3xl:      clamp(1.8rem, 3vw, 2.5rem);
    --bi-text-4xl:      clamp(2.2rem, 4vw, 3.2rem);
    --bi-text-hero:     clamp(2.5rem, 5vw, 4rem);

    /* ===== Font Weights ===== */
    --bi-weight-normal:  400;
    --bi-weight-medium:  600;
    --bi-weight-bold:    700;

    /* ===== Line Heights ===== */
    --bi-leading-tight:  1.2;
    --bi-leading-normal: 1.5;
    --bi-leading-relaxed: 1.7;

    /* ===== Spacing ===== */
    --bi-space-xs:   0.25rem;
    --bi-space-sm:   0.5rem;
    --bi-space-md:   1rem;
    --bi-space-lg:   1.5rem;
    --bi-space-xl:   2rem;
    --bi-space-2xl:  3rem;
    --bi-space-3xl:  4rem;
    --bi-space-4xl:  6rem;

    /* ===== Layout ===== */
    --bi-container:        1200px;
    --bi-container-narrow: 680px;
    --bi-container-wide:   1280px;
    --bi-sidebar-width:    320px;

    /* ===== Border Radius ===== */
    --bi-radius-sm:  6px;
    --bi-radius-md:  8px;
    --bi-radius-lg:  12px;
    --bi-radius-xl:  16px;
    --bi-radius-full: 50%;

    /* ===== Shadows ===== */
    --bi-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --bi-shadow-md:  0 2px 8px rgba(0, 0, 0, 0.4);
    --bi-shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.5);
    --bi-shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.6);
    --bi-shadow-gold: 0 4px 20px rgba(212, 160, 23, 0.3);

    /* ===== Transitions ===== */
    --bi-transition-fast:   0.15s ease;
    --bi-transition-base:   0.2s ease;
    --bi-transition-slow:   0.3s ease;
    --bi-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-Index ===== */
    --bi-z-sidebar:  99;
    --bi-z-toggle:   100;
    --bi-z-header:   200;
    --bi-z-overlay:  300;
    --bi-z-modal:    400;
}