/**
 * ============================================================================
 * GetBiz.Credit (GBC) – Design Token Layer
 * ============================================================================
 * 
 * PURPOSE:
 * This file provides the semantic token layer that bridges WowDash's base
 * variables with GBC's brand identity. It NEVER modifies style.css - instead
 * it loads AFTER style.css and provides semantic aliases.
 * 
 * LOAD ORDER (critical):
 *   1. vendor libs (bootstrap, etc.)
 *   2. style.css (WowDash base)
 *   3. _gbc-tokens.css (this file)
 *   4. page-specific CSS files
 * 
 * BRAND COLORS (LOCKED - Source: BAE_FACELIFT_SCOPE_LOCK_v1.md):
 *   - Primary Indigo: #303E8B
 *   - Secondary Teal: #156888
 *   - Success Green:  #2CC207 (success states only)
 *   - Upgrade Orange: #FF8A00 (upgrade/locked states only)
 * 
 * PHILOSOPHY:
 *   - Token-first: Always use var(--gbc-*) in new code
 *   - Semantic meaning: Names describe purpose, not appearance
 *   - Component-driven: Group by function (buttons, nav, surfaces)
 *   - Low-risk rollout: Override without breaking existing styles
 * 
 * @version 1.0.0
 * @phase Phase 0 + Phase 1
 * ============================================================================
 */

/* ============================================================================
   LAYER 1: BASE BRAND COLORS
   These are the raw brand palette values that feed semantic tokens below.
   ============================================================================ */
:root {
  /* ─────────────────────────────────────────────────────────────────────────
     Primary: Indigo #303E8B
     Usage: Primary actions, active states, main brand identity
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-indigo-50:  #E8EAF4;
  --gbc-indigo-100: #C5CAE4;
  --gbc-indigo-200: #9EA7D3;
  --gbc-indigo-300: #7783C1;
  --gbc-indigo-400: #5969B3;
  --gbc-indigo-500: #3B4FA5;
  --gbc-indigo-600: #303E8B; /* ← BASE BRAND COLOR */
  --gbc-indigo-700: #283574;
  --gbc-indigo-800: #202C5D;
  --gbc-indigo-900: #182346;

  /* ─────────────────────────────────────────────────────────────────────────
     Secondary: Teal #156888
     Usage: Secondary actions, links, info states, accents
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-teal-50:  #E3F2F7;
  --gbc-teal-100: #B9DFEB;
  --gbc-teal-200: #8ACBDE;
  --gbc-teal-300: #5BB6D0;
  --gbc-teal-400: #37A6C6;
  --gbc-teal-500: #1396BC;
  --gbc-teal-600: #156888; /* ← BASE BRAND COLOR */
  --gbc-teal-700: #125872;
  --gbc-teal-800: #0F485C;
  --gbc-teal-900: #0B3846;

  /* ─────────────────────────────────────────────────────────────────────────
     Success: Green #2CC207
     Usage: Success states, completion, positive feedback ONLY
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-green-50:  #E9F9E5;
  --gbc-green-100: #C8F0BE;
  --gbc-green-200: #A3E793;
  --gbc-green-300: #7DDD67;
  --gbc-green-400: #60D546;
  --gbc-green-500: #2CC207; /* ← BASE BRAND COLOR */
  --gbc-green-600: #26A906;
  --gbc-green-700: #1F9005;
  --gbc-green-800: #187704;
  --gbc-green-900: #115E03;

  /* ─────────────────────────────────────────────────────────────────────────
     Upgrade: Orange #FF8A00
     Usage: Premium/upgrade CTAs, locked states, attention ONLY
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-orange-50:  #FFF3E0;
  --gbc-orange-100: #FFE0B2;
  --gbc-orange-200: #FFCC80;
  --gbc-orange-300: #FFB74D;
  --gbc-orange-400: #FFA726;
  --gbc-orange-500: #FF8A00; /* ← BASE BRAND COLOR */
  --gbc-orange-600: #E67C00;
  --gbc-orange-700: #CC6E00;
  --gbc-orange-800: #B36000;
  --gbc-orange-900: #995200;

  /* ─────────────────────────────────────────────────────────────────────────
     Neutral Scale (GBC semantic aliases for WowDash neutrals)
     Maps to existing WowDash neutral-* scale for compatibility
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-neutral-50:  var(--neutral-50,  #F5F6FA);
  --gbc-neutral-100: var(--neutral-100, #F3F4F6);
  --gbc-neutral-200: var(--neutral-200, #EBECEF);
  --gbc-neutral-300: var(--neutral-300, #D1D5DB);
  --gbc-neutral-400: var(--neutral-400, #9CA3AF);
  --gbc-neutral-500: var(--neutral-500, #6B7280);
  --gbc-neutral-600: var(--neutral-600, #4B5563);
  --gbc-neutral-700: var(--neutral-700, #374151);
  --gbc-neutral-800: var(--neutral-800, #1F2937);
  --gbc-neutral-900: var(--neutral-900, #111827);


  /* ==========================================================================
     LAYER 2: SEMANTIC TOKENS
     These are the tokens you use in actual CSS. They reference Layer 1.
     ========================================================================== */

  /* ─────────────────────────────────────────────────────────────────────────
     Primary Semantic (maps to Indigo)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-primary:        var(--gbc-indigo-600);
  --gbc-primary-light:  var(--gbc-indigo-400);
  --gbc-primary-dark:   var(--gbc-indigo-800);
  --gbc-primary-subtle: var(--gbc-indigo-50);

  /* ─────────────────────────────────────────────────────────────────────────
     Secondary Semantic (maps to Teal)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-secondary:        var(--gbc-teal-600);
  --gbc-secondary-light:  var(--gbc-teal-400);
  --gbc-secondary-dark:   var(--gbc-teal-800);
  --gbc-secondary-subtle: var(--gbc-teal-50);

  /* ─────────────────────────────────────────────────────────────────────────
     Success Semantic (maps to Green) - use sparingly
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-success:        var(--gbc-green-500);
  --gbc-success-light:  var(--gbc-green-300);
  --gbc-success-dark:   var(--gbc-green-700);
  --gbc-success-subtle: var(--gbc-green-50);

  /* ─────────────────────────────────────────────────────────────────────────
     Upgrade/Premium Semantic (maps to Orange) - use sparingly
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-upgrade:        var(--gbc-orange-500);
  --gbc-upgrade-light:  var(--gbc-orange-300);
  --gbc-upgrade-dark:   var(--gbc-orange-700);
  --gbc-upgrade-subtle: var(--gbc-orange-50);

  /* ─────────────────────────────────────────────────────────────────────────
     Danger/Error Semantic (inherits WowDash danger scale)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-danger:        var(--danger-500, #EF4444);
  --gbc-danger-light:  var(--danger-300, #FCA5A5);
  --gbc-danger-dark:   var(--danger-700, #B91C1C);
  --gbc-danger-subtle: var(--danger-50, #FEF2F2);

  /* ─────────────────────────────────────────────────────────────────────────
     Warning Semantic (inherits WowDash warning scale)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-warning:        var(--warning-500, #EAB308);
  --gbc-warning-light:  var(--warning-300, #FDE047);
  --gbc-warning-dark:   var(--warning-700, #f39016);
  --gbc-warning-subtle: var(--warning-50, #FEFCE8);


  /* ==========================================================================
     LAYER 3: SURFACE & TEXT TOKENS
     Context-aware tokens for backgrounds, text, borders
     ========================================================================== */

  /* ─────────────────────────────────────────────────────────────────────────
     Background Surfaces
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-surface-base:     var(--bg-color, #F5F6FA);
  --gbc-surface-card:     var(--white, #FFFFFF);
  --gbc-surface-elevated: var(--white, #FFFFFF);
  --gbc-surface-overlay:  rgba(0, 0, 0, 0.5);
  --gbc-surface-muted:    var(--gbc-neutral-100);

  /* ─────────────────────────────────────────────────────────────────────────
     Text Colors
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-text-primary:   var(--text-primary-light, #1F2937);
  --gbc-text-secondary: var(--text-secondary-light, #6B7280);
  --gbc-text-muted:     var(--gbc-neutral-400);
  --gbc-text-inverse:   #FFFFFF;
  --gbc-text-link:      var(--gbc-secondary);
  --gbc-text-link-hover: var(--gbc-secondary-dark);

  /* ─────────────────────────────────────────────────────────────────────────
     Border Colors
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-border-default: var(--border-color, #D1D5DB);
  --gbc-border-light:   var(--gbc-neutral-200);
  --gbc-border-focus:   var(--gbc-primary);

  /* ─────────────────────────────────────────────────────────────────────────
     Phase 1.1: Additional Semantic Tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-link:              var(--gbc-secondary);
  --gbc-link-hover:        var(--gbc-secondary-dark);
  --gbc-focus-ring:        var(--gbc-primary);
  --gbc-focus-ring-shadow: rgba(48, 62, 139, 0.15);
  --gbc-info:              var(--gbc-teal-500);
  --gbc-info-subtle:       var(--gbc-teal-50);

  /* ==========================================================================
     LAYER 4: COMPONENT-SPECIFIC TOKENS
     Pre-composed tokens for buttons, nav, inputs, etc.
     ========================================================================== */

  /* ─────────────────────────────────────────────────────────────────────────
     Button: Primary
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-btn-primary-bg:           var(--gbc-primary);
  --gbc-btn-primary-text:         #FFFFFF;
  --gbc-btn-primary-border:       var(--gbc-primary);
  --gbc-btn-primary-bg-hover:     var(--gbc-indigo-700);
  --gbc-btn-primary-bg-active:    var(--gbc-indigo-800);

  /* ─────────────────────────────────────────────────────────────────────────
     Button: Secondary (Teal)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-btn-secondary-bg:         var(--gbc-secondary);
  --gbc-btn-secondary-text:       #FFFFFF;
  --gbc-btn-secondary-border:     var(--gbc-secondary);
  --gbc-btn-secondary-bg-hover:   var(--gbc-teal-700);
  --gbc-btn-secondary-bg-active:  var(--gbc-teal-800);

  /* ─────────────────────────────────────────────────────────────────────────
     Button: Ghost (Outline Style)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-btn-ghost-bg:             transparent;
  --gbc-btn-ghost-text:           var(--gbc-primary);
  --gbc-btn-ghost-border:         var(--gbc-primary);
  --gbc-btn-ghost-bg-hover:       var(--gbc-indigo-50);
  --gbc-btn-ghost-text-hover:     var(--gbc-indigo-700);

  /* ─────────────────────────────────────────────────────────────────────────
     Button: Upgrade (Orange CTA)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-btn-upgrade-bg:           var(--gbc-upgrade);
  --gbc-btn-upgrade-text:         #FFFFFF;
  --gbc-btn-upgrade-border:       var(--gbc-upgrade);
  --gbc-btn-upgrade-bg-hover:     var(--gbc-orange-600);
  --gbc-btn-upgrade-bg-active:    var(--gbc-orange-700);

  /* ─────────────────────────────────────────────────────────────────────────
     Button: Success (Green)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-btn-success-bg:           var(--gbc-success);
  --gbc-btn-success-text:         #FFFFFF;
  --gbc-btn-success-border:       var(--gbc-success);
  --gbc-btn-success-bg-hover:     var(--gbc-green-600);
  --gbc-btn-success-bg-active:    var(--gbc-green-700);

  /* ─────────────────────────────────────────────────────────────────────────
     Button: Danger
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-btn-danger-bg:            var(--gbc-danger);
  --gbc-btn-danger-text:          #FFFFFF;
  --gbc-btn-danger-border:        var(--gbc-danger);
  --gbc-btn-danger-bg-hover:      var(--danger-600, #DC2626);
  --gbc-btn-danger-bg-active:     var(--danger-700, #B91C1C);

  /* ─────────────────────────────────────────────────────────────────────────
     Navigation Tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-nav-bg:                   var(--gbc-surface-card);
  --gbc-nav-text:                 var(--gbc-text-secondary);
  --gbc-nav-text-active:          var(--gbc-primary);
  --gbc-nav-indicator:            var(--gbc-primary);
  --gbc-nav-hover-bg:             var(--gbc-neutral-100);

  /* ─────────────────────────────────────────────────────────────────────────
     Sidebar Tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-sidebar-bg:               var(--gbc-neutral-900);
  --gbc-sidebar-text:             var(--gbc-neutral-300);
  --gbc-sidebar-text-active:      #FFFFFF;
  --gbc-sidebar-item-hover-bg:    rgba(255, 255, 255, 0.08);
  --gbc-sidebar-item-active-bg:   var(--gbc-primary);

  /* ─────────────────────────────────────────────────────────────────────────
     Card Tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-card-bg:                  var(--gbc-surface-card);
  --gbc-card-border:              var(--gbc-border-light);
  --gbc-card-shadow:              0 1px 3px rgba(0, 0, 0, 0.1);
  --gbc-card-radius:              8px;

  /* ─────────────────────────────────────────────────────────────────────────
     Input/Form Tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-input-bg:                 var(--input-bg, #FFFFFF);
  --gbc-input-border:             var(--gbc-border-default);
  --gbc-input-border-focus:       var(--gbc-primary);
  --gbc-input-text:               var(--gbc-text-primary);
  --gbc-input-placeholder:        var(--gbc-text-muted);

  /* ─────────────────────────────────────────────────────────────────────────
     Badge/Tag Tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-badge-primary-bg:         var(--gbc-primary-subtle);
  --gbc-badge-primary-text:       var(--gbc-primary);
  --gbc-badge-success-bg:         var(--gbc-success-subtle);
  --gbc-badge-success-text:       var(--gbc-success-dark);
  --gbc-badge-warning-bg:         var(--gbc-warning-subtle);
  --gbc-badge-warning-text:       var(--gbc-warning-dark);
  --gbc-badge-danger-bg:          var(--gbc-danger-subtle);
  --gbc-badge-danger-text:        var(--gbc-danger-dark);

  /* ==========================================================================
     PHASE 2: LOCK SEMANTIC TOKENS
     Two distinct lock reasons with different visual semantics:
     1) Upgrade Lock — paywall/plan restriction (Orange)
     2) Prerequisite Lock — missing requirement (Neutral/Gray)
     ========================================================================== */

  /* ─────────────────────────────────────────────────────────────────────────
     Lock: Upgrade (paywall / plan restriction)
     Color: Orange (monetization semantic)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-lock-upgrade-bg:          var(--gbc-upgrade-subtle);
  --gbc-lock-upgrade-border:      var(--gbc-upgrade);
  --gbc-lock-upgrade-text:        var(--gbc-upgrade-dark);
  --gbc-lock-upgrade-icon:        var(--gbc-upgrade);

  /* ─────────────────────────────────────────────────────────────────────────
     Lock: Prerequisite (missing requirement / not ready)
     Color: Neutral/Gray (disabled semantic)
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-lock-prereq-bg:           var(--gbc-neutral-100);
  --gbc-lock-prereq-border:       var(--gbc-neutral-300);
  --gbc-lock-prereq-text:         var(--gbc-neutral-600);
  --gbc-lock-prereq-icon:         var(--gbc-neutral-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Shared lock chip styling tokens
     ───────────────────────────────────────────────────────────────────────── */
  --gbc-lock-chip-radius:         999px;
  --gbc-lock-chip-padding:        4px 10px;
  --gbc-lock-chip-font-size:      11px;
  --gbc-lock-chip-font-weight:    600;

  /* ==========================================================================
     PHASE 2: TABLE TOKENS
     ========================================================================== */
  --gbc-table-header-bg:          var(--gbc-neutral-50);
  --gbc-table-header-text:        var(--gbc-text-secondary);
  --gbc-table-row-hover:          rgba(48, 62, 139, 0.03);
  --gbc-table-row-selected:       rgba(48, 62, 139, 0.06);
  --gbc-table-row-selected-border: var(--gbc-primary);
  --gbc-table-border:             var(--gbc-neutral-200);

  /* ==========================================================================
     PHASE 2: FORM STATE TOKENS
     ========================================================================== */
  --gbc-input-disabled-bg:        var(--gbc-neutral-100);
  --gbc-input-disabled-text:      var(--gbc-neutral-400);
  --gbc-input-disabled-border:    var(--gbc-neutral-200);
  --gbc-input-error-border:       var(--gbc-danger);
  --gbc-input-error-text:         var(--gbc-danger);
  --gbc-input-error-bg:           var(--gbc-danger-subtle);

  /* ==========================================================================
     PHASE 2: CARD EXTENDED TOKENS
     ========================================================================== */
  --gbc-card-hover-shadow:        0 4px 16px rgba(0, 0, 0, 0.12);
  --gbc-card-hover-transform:     translateY(-2px);

  /* ==========================================================================
     PHASE 2: PRIMARY SHADOW TOKENS (replaces legacy rgba(72, 127, 255...))
     ========================================================================== */
  --gbc-shadow-primary-sm:        0 2px 8px rgba(48, 62, 139, 0.25);
  --gbc-shadow-primary-md:        0 4px 12px rgba(48, 62, 139, 0.30);
  --gbc-shadow-primary-lg:        0 4px 20px rgba(48, 62, 139, 0.35);
}


/* ============================================================================
   DARK MODE OVERRIDES
   When [data-theme=dark] is active, these tokens adapt automatically.
   ============================================================================ */
[data-theme=dark] {
  /* Surface overrides */
  --gbc-surface-base:     var(--bg-color, #111827);
  --gbc-surface-card:     var(--dark-2, #1F2937);
  --gbc-surface-elevated: var(--dark-3, #273142);
  --gbc-surface-muted:    var(--gbc-neutral-800);

  /* Text overrides */
  --gbc-text-primary:     var(--text-primary-light, #F9FAFB);
  --gbc-text-secondary:   var(--text-secondary-light, #D1D5DB);
  --gbc-text-muted:       var(--gbc-neutral-500);
  --gbc-text-inverse:     #111827;
  --gbc-text-link:        var(--gbc-teal-400);
  --gbc-text-link-hover:  var(--gbc-teal-300);

  /* Border overrides */
  --gbc-border-default:   var(--border-color, rgba(209, 213, 219, 0.2));
  --gbc-border-light:     rgba(255, 255, 255, 0.1);

  /* Button adjustments for contrast */
  --gbc-btn-ghost-bg-hover: rgba(48, 62, 139, 0.2);
  
  /* Navigation */
  --gbc-nav-bg:           var(--gbc-surface-card);
  --gbc-nav-hover-bg:     rgba(255, 255, 255, 0.05);
  
  /* Card */
  --gbc-card-bg:          var(--gbc-surface-card);
  --gbc-card-border:      var(--gbc-border-light);
  --gbc-card-shadow:      0 1px 3px rgba(0, 0, 0, 0.3);

  /* Input */
  --gbc-input-bg:         var(--input-bg, #273142);

  /* Badge backgrounds need better contrast in dark mode */
  --gbc-badge-primary-bg: rgba(48, 62, 139, 0.3);
  --gbc-badge-success-bg: rgba(44, 194, 7, 0.2);
  --gbc-badge-warning-bg: rgba(255, 138, 0, 0.2);
  --gbc-badge-danger-bg:  rgba(239, 68, 68, 0.2);

  /* Phase 1.1: Dark mode overrides for new tokens */
  --gbc-link:              var(--gbc-teal-400);
  --gbc-link-hover:        var(--gbc-teal-300);
  --gbc-focus-ring-shadow: rgba(48, 62, 139, 0.25);

  /* Phase 2: Dark mode lock tokens */
  --gbc-lock-upgrade-bg:    rgba(255, 138, 0, 0.15);
  --gbc-lock-prereq-bg:     var(--gbc-neutral-800);
  --gbc-lock-prereq-border: var(--gbc-neutral-600);
  --gbc-lock-prereq-text:   var(--gbc-neutral-400);
  --gbc-lock-prereq-icon:   var(--gbc-neutral-500);

  /* Phase 2: Dark mode table tokens */
  --gbc-table-header-bg:    var(--gbc-neutral-800);
  --gbc-table-row-hover:    rgba(255, 255, 255, 0.03);
  --gbc-table-row-selected: rgba(48, 62, 139, 0.15);
  --gbc-table-border:       var(--gbc-neutral-700);

  /* Phase 2: Dark mode form state tokens */
  --gbc-input-disabled-bg:  var(--gbc-neutral-800);
  --gbc-input-disabled-text: var(--gbc-neutral-500);
  --gbc-input-error-bg:     rgba(239, 68, 68, 0.1);

  /* Phase 2: Dark mode card tokens */
  --gbc-card-hover-shadow:  0 4px 16px rgba(0, 0, 0, 0.4);
}


/* ============================================================================
   COMPONENT UTILITY CLASSES
   Ready-to-use classes that apply token-based styles.
   Phase 1: Buttons and Navigation
   Phase 2: Lock chips and badges
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   GBC Buttons - Token-based button styles
   Usage: <button class="gbc-btn gbc-btn-primary">Label</button>
   ───────────────────────────────────────────────────────────────────────── */
.gbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  border: 1px solid transparent;
}

.gbc-btn:focus-visible {
  outline: 2px solid var(--gbc-primary);
  outline-offset: 2px;
}

.gbc-btn:disabled,
.gbc-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button */
.gbc-btn-primary {
  background-color: var(--gbc-btn-primary-bg);
  color: var(--gbc-btn-primary-text);
  border-color: var(--gbc-btn-primary-border);
}

.gbc-btn-primary:hover {
  background-color: var(--gbc-btn-primary-bg-hover);
  border-color: var(--gbc-btn-primary-bg-hover);
}

.gbc-btn-primary:active {
  background-color: var(--gbc-btn-primary-bg-active);
  border-color: var(--gbc-btn-primary-bg-active);
}

/* Secondary Button (Teal) */
.gbc-btn-secondary {
  background-color: var(--gbc-btn-secondary-bg);
  color: var(--gbc-btn-secondary-text);
  border-color: var(--gbc-btn-secondary-border);
}

.gbc-btn-secondary:hover {
  background-color: var(--gbc-btn-secondary-bg-hover);
  border-color: var(--gbc-btn-secondary-bg-hover);
}

.gbc-btn-secondary:active {
  background-color: var(--gbc-btn-secondary-bg-active);
  border-color: var(--gbc-btn-secondary-bg-active);
}

/* Ghost Button (Outline) */
.gbc-btn-ghost {
  background-color: var(--gbc-btn-ghost-bg);
  color: var(--gbc-btn-ghost-text);
  border-color: var(--gbc-btn-ghost-border);
}

.gbc-btn-ghost:hover {
  background-color: var(--gbc-btn-ghost-bg-hover);
  color: var(--gbc-btn-ghost-text-hover);
}

/* Upgrade Button (Orange CTA) */
.gbc-btn-upgrade {
  background-color: var(--gbc-btn-upgrade-bg);
  color: var(--gbc-btn-upgrade-text);
  border-color: var(--gbc-btn-upgrade-border);
}

.gbc-btn-upgrade:hover {
  background-color: var(--gbc-btn-upgrade-bg-hover);
  border-color: var(--gbc-btn-upgrade-bg-hover);
}

.gbc-btn-upgrade:active {
  background-color: var(--gbc-btn-upgrade-bg-active);
  border-color: var(--gbc-btn-upgrade-bg-active);
}

/* Success Button */
.gbc-btn-success {
  background-color: var(--gbc-btn-success-bg);
  color: var(--gbc-btn-success-text);
  border-color: var(--gbc-btn-success-border);
}

.gbc-btn-success:hover {
  background-color: var(--gbc-btn-success-bg-hover);
  border-color: var(--gbc-btn-success-bg-hover);
}

.gbc-btn-success:active {
  background-color: var(--gbc-btn-success-bg-active);
  border-color: var(--gbc-btn-success-bg-active);
}

/* Danger Button */
.gbc-btn-danger {
  background-color: var(--gbc-btn-danger-bg);
  color: var(--gbc-btn-danger-text);
  border-color: var(--gbc-btn-danger-border);
}

.gbc-btn-danger:hover {
  background-color: var(--gbc-btn-danger-bg-hover);
  border-color: var(--gbc-btn-danger-bg-hover);
}

.gbc-btn-danger:active {
  background-color: var(--gbc-btn-danger-bg-active);
  border-color: var(--gbc-btn-danger-bg-active);
}

/* Button Sizes */
.gbc-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.gbc-btn-lg {
  padding: 14px 28px;
  font-size: 16px;
}

/* Button Icon Modifier */
.gbc-btn-icon {
  padding: 10px;
  min-width: 40px;
}

.gbc-btn-icon.gbc-btn-sm {
  padding: 6px;
  min-width: 32px;
}


/* ─────────────────────────────────────────────────────────────────────────
   GBC Links - Token-based link styles
   ───────────────────────────────────────────────────────────────────────── */
.gbc-link {
  color: var(--gbc-text-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.gbc-link:hover {
  color: var(--gbc-text-link-hover);
  text-decoration: underline;
}

.gbc-link-primary {
  color: var(--gbc-primary);
}

.gbc-link-primary:hover {
  color: var(--gbc-primary-dark);
}


/* ─────────────────────────────────────────────────────────────────────────
   GBC Text Utilities
   ───────────────────────────────────────────────────────────────────────── */
.gbc-text-primary { color: var(--gbc-text-primary); }
.gbc-text-secondary { color: var(--gbc-text-secondary); }
.gbc-text-muted { color: var(--gbc-text-muted); }
.gbc-text-success { color: var(--gbc-success); }
.gbc-text-danger { color: var(--gbc-danger); }
.gbc-text-warning { color: var(--gbc-warning); }
.gbc-text-brand { color: var(--gbc-primary); }


/* ─────────────────────────────────────────────────────────────────────────
   GBC Background Utilities
   ───────────────────────────────────────────────────────────────────────── */
.gbc-bg-base { background-color: var(--gbc-surface-base); }
.gbc-bg-card { background-color: var(--gbc-surface-card); }
.gbc-bg-muted { background-color: var(--gbc-surface-muted); }
.gbc-bg-primary { background-color: var(--gbc-primary); }
.gbc-bg-primary-subtle { background-color: var(--gbc-primary-subtle); }
.gbc-bg-secondary { background-color: var(--gbc-secondary); }
.gbc-bg-secondary-subtle { background-color: var(--gbc-secondary-subtle); }


/* ─────────────────────────────────────────────────────────────────────────
   GBC Border Utilities
   ───────────────────────────────────────────────────────────────────────── */
.gbc-border { border: 1px solid var(--gbc-border-default); }
.gbc-border-light { border: 1px solid var(--gbc-border-light); }
.gbc-border-primary { border: 1px solid var(--gbc-primary); }


/* ─────────────────────────────────────────────────────────────────────────
   GBC Card Base (Phase 1 prep for Phase 2)
   ───────────────────────────────────────────────────────────────────────── */
.gbc-card {
  background-color: var(--gbc-card-bg);
  border: 1px solid var(--gbc-card-border);
  border-radius: var(--gbc-card-radius);
  box-shadow: var(--gbc-card-shadow);
}


/* ─────────────────────────────────────────────────────────────────────────
   GBC Badge/Tag Base (Phase 1 prep for Phase 2)
   ───────────────────────────────────────────────────────────────────────── */
.gbc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
}

.gbc-badge-primary {
  background-color: var(--gbc-badge-primary-bg);
  color: var(--gbc-badge-primary-text);
}

.gbc-badge-success {
  background-color: var(--gbc-badge-success-bg);
  color: var(--gbc-badge-success-text);
}

.gbc-badge-warning {
  background-color: var(--gbc-badge-warning-bg);
  color: var(--gbc-badge-warning-text);
}

.gbc-badge-danger {
  background-color: var(--gbc-badge-danger-bg);
  color: var(--gbc-badge-danger-text);
}

/* ─────────────────────────────────────────────────────────────────────────
   GBC Lock Chips - Phase 2 Lock Semantics
   
   USAGE:
   Upgrade Lock (paywall):
     <span class="gbc-lock-chip gbc-lock--upgrade" 
           title="Upgrade your plan to unlock this feature.">
       <iconify-icon icon="mdi:lock"></iconify-icon> Upgrade
     </span>
   
   Prerequisite Lock (missing requirement):
     <span class="gbc-lock-chip gbc-lock--prereq"
           title="Complete the required steps to unlock this.">
       <iconify-icon icon="mdi:lock"></iconify-icon> Prerequisite
     </span>
   ───────────────────────────────────────────────────────────────────────── */

/* Base lock chip styling */
.gbc-lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--gbc-lock-chip-padding);
  font-size: var(--gbc-lock-chip-font-size);
  font-weight: var(--gbc-lock-chip-font-weight);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: var(--gbc-lock-chip-radius);
  white-space: nowrap;
  cursor: help;
}

.gbc-lock-chip iconify-icon,
.gbc-lock-chip .lock-icon {
  font-size: 12px;
}

/* Upgrade Lock - Orange (paywall/monetization) */
.gbc-lock--upgrade {
  background-color: var(--gbc-lock-upgrade-bg);
  color: var(--gbc-lock-upgrade-text);
  border: 1px solid var(--gbc-lock-upgrade-border);
}

.gbc-lock--upgrade iconify-icon,
.gbc-lock--upgrade .lock-icon {
  color: var(--gbc-lock-upgrade-icon);
}

/* Prerequisite Lock - Neutral/Gray (disabled/not ready) */
.gbc-lock--prereq {
  background-color: var(--gbc-lock-prereq-bg);
  color: var(--gbc-lock-prereq-text);
  border: 1px solid var(--gbc-lock-prereq-border);
}

.gbc-lock--prereq iconify-icon,
.gbc-lock--prereq .lock-icon {
  color: var(--gbc-lock-prereq-icon);
}

/* Lock overlay for cards */
.gbc-lock-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.gbc-lock-overlay--upgrade {
  background: var(--gbc-lock-upgrade-bg);
  color: var(--gbc-lock-upgrade-icon);
}

.gbc-lock-overlay--prereq {
  background: var(--gbc-lock-prereq-bg);
  color: var(--gbc-lock-prereq-icon);
}

/* Lock message box */
.gbc-lock-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.gbc-lock-message--upgrade {
  background: var(--gbc-lock-upgrade-bg);
  border: 1px solid var(--gbc-lock-upgrade-border);
  color: var(--gbc-lock-upgrade-text);
}

.gbc-lock-message--prereq {
  background: var(--gbc-lock-prereq-bg);
  border: 1px solid var(--gbc-lock-prereq-border);
  color: var(--gbc-lock-prereq-text);
}

.gbc-lock-message iconify-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.gbc-lock-message--upgrade iconify-icon {
  color: var(--gbc-lock-upgrade-icon);
}

.gbc-lock-message--prereq iconify-icon {
  color: var(--gbc-lock-prereq-icon);
}