/*
================================================================================
BUYERBENCH DESIGN SYSTEM — CSS VARIABLES
================================================================================
Single source of truth for all design tokens.
Change colours here → changes apply across entire site.

HOW TO USE IN WORDPRESS:
1. Save this file as buyerbench-variables.css in your theme folder
   (e.g., /wp-content/themes/kadence-child/css/buyerbench-variables.css)

2. Enqueue in functions.php BEFORE buyerbench-blocks.css:
   
   function buyerbench_enqueue_styles() {
     wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap', array(), null);
     wp_enqueue_style('bb-variables', get_stylesheet_directory_uri() . '/css/buyerbench-variables.css', array('google-fonts'), '1.0');
     wp_enqueue_style('bb-blocks', get_stylesheet_directory_uri() . '/css/buyerbench-blocks.css', array('bb-variables'), '1.0');
   }
   add_action('wp_enqueue_scripts', 'buyerbench_enqueue_styles');

Last updated: April 2026
================================================================================
*/


/* ===================== CORE DESIGN TOKENS ===================== */
:root {
  
  /* ─────────────────────────────────────────────────────────────
     PRIMARY PALETTE
     These are the main brand colours. Change these to retheme.
  ───────────────────────────────────────────────────────────── */
  --bb-navy:              #1a2744;
  --bb-navy-mid:          #223060;
  --bb-navy-light:        #2d3e73;
  --bb-navy-subtle:       #354872;
  --bb-navy-dark:         #141f38;
  
  --bb-blue:              #2d52a0;
  --bb-blue-light:        #4368b8;
  --bb-blue-wash:         #e8eeff;
  --bb-blue-wash-dark:    #dde8ff;
  --bb-blue-alpha-06:     rgba(45,82,160,0.06);
  --bb-blue-alpha-25:     rgba(45,82,160,0.25);
  
  --bb-amber:             #f0a500;
  --bb-amber-light:       #fef3d0;
  --bb-amber-dark:        #c47f00;
  --bb-amber-glow:        rgba(240,165,0,0.08);
  --bb-amber-glow-md:     rgba(240,165,0,0.12);
  --bb-amber-glow-strong: rgba(240,165,0,0.15);
  --bb-amber-shadow:      rgba(240,165,0,0.32);
  --bb-amber-shadow-hover:rgba(240,165,0,0.45);
  --bb-amber-dark-alpha:  rgba(196,127,0,0.2);
  
  
  /* ─────────────────────────────────────────────────────────────
     BACKGROUNDS
  ───────────────────────────────────────────────────────────── */
  --bb-bg:                #f4f6fb;
  --bb-bg-warm:           #fafbff;
  --bb-white:             #ffffff;
  
  
  /* ─────────────────────────────────────────────────────────────
     TEXT COLOURS
  ───────────────────────────────────────────────────────────── */
  --bb-text:              #1a2744;
  --bb-text-mid:          #475569;
  --bb-text-light:        #7c8db5;
  --bb-text-faint:        #a0b0cc;
  --bb-text-white:        #ffffff;
  --bb-text-white-soft:   rgba(255,255,255,0.78);
  --bb-text-white-muted:  rgba(255,255,255,0.6);
  
  
  /* ─────────────────────────────────────────────────────────────
     BORDERS
  ───────────────────────────────────────────────────────────── */
  --bb-border:            #dde3f0;
  --bb-border-light:      #eef1f8;
  --bb-border-faint:      #f3f5fa;
  --bb-border-mid:        #c8d2ea;
  
  
  /* ─────────────────────────────────────────────────────────────
     SEMANTIC COLOURS (Success / Error)
  ───────────────────────────────────────────────────────────── */
  --bb-green:             #1a7f37;
  --bb-green-bg:          #f0fdf4;
  --bb-green-border:      #bbf7d0;
  
  --bb-red:               #b91c1c;
  --bb-red-bg:            #fff5f5;
  --bb-red-border:        #fecaca;
  
  
  /* ─────────────────────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────────────────────── */
  --bb-font-heading:      'Sora', sans-serif;
  --bb-font-body:         'Lora', Georgia, serif;
  
  
  /* ─────────────────────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────────────────────── */
  --bb-shadow-xs:         0 1px 2px rgba(26,39,68,0.05);
  --bb-shadow-sm:         0 1px 3px rgba(26,39,68,0.08);
  --bb-shadow-md:         0 4px 16px rgba(26,39,68,0.1);
  --bb-shadow-lg:         0 8px 32px rgba(26,39,68,0.14);
  --bb-shadow-card-hover: 0 10px 32px rgba(26,39,68,0.1);
  --bb-shadow-cta:        0 6px 24px rgba(240,165,0,0.32);
  --bb-shadow-cta-hover:  0 10px 32px rgba(240,165,0,0.45);
  
  
  /* ─────────────────────────────────────────────────────────────
     BORDER RADII
  ───────────────────────────────────────────────────────────── */
  --bb-radius-xs:         6px;
  --bb-radius-sm:         8px;
  --bb-radius-md:         12px;
  --bb-radius-lg:         14px;
  --bb-radius-xl:         16px;
  --bb-radius-2xl:        20px;
  --bb-radius-pill:       100px;
  
  
  /* ─────────────────────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────────────────────── */
  --bb-transition:        0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --bb-transition-fast:   0.15s ease;
  --bb-transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bb-transition-bounce: 0.35s cubic-bezier(0.4, 0, 0.2, 1);


  /* ─────────────────────────────────────────────────────────────
     GRADIENTS (pre-defined for consistency)
  ───────────────────────────────────────────────────────────── */
  --bb-gradient-navy:     linear-gradient(145deg, var(--bb-navy), var(--bb-navy-mid));
  --bb-gradient-navy-full:linear-gradient(135deg, var(--bb-navy-dark) 0%, var(--bb-navy) 50%, var(--bb-navy-mid) 100%);
  --bb-gradient-card-bg:  linear-gradient(145deg, #e8edf8 0%, #dde4f0 60%, #c8d2ea 100%);
  --bb-gradient-rule:     linear-gradient(90deg, transparent, var(--bb-amber), transparent);
}


/* ===================== UTILITY: BRAND WORDMARK ===================== */
/* Use wherever "BuyerBench" appears in text */
.bb-brand {
  font-family: var(--bb-font-heading);
  font-weight: 700;
}
.bb-brand-b1 { color: var(--bb-navy); }
.bb-brand-b2 { color: var(--bb-amber); }