:root {
  /* Default theme color */
  --t4b-blue:   #0d6efd;
  --t4b-indigo: #6610f2;
  --t4b-purple: #6f42c1;
  --t4b-pink:   #d63384;
  --t4b-red:    #dc3545;
  --t4b-orange: #fd7e14;
  --t4b-yellow: #ffc107;
  --t4b-green:  #198754;
  --t4b-teal:   #20c997;
  --t4b-cyan:   #0dcaf0;
  --t4b-white:  #fff;
  --t4b-gray:   #6c757d;

  --t4b-gray-dark:#343a40;
  --t4b-gray-100: #f8f9fa;
  --t4b-gray-200: #e9ecef;
  --t4b-gray-300: #dee2e6;
  --t4b-gray-400: #ced4da;
  --t4b-gray-500: #adb5bd;
  --t4b-gray-600: #6c757d;
  --t4b-gray-700: #495057;
  --t4b-gray-800: #343a40;
  --t4b-gray-900: #212529;

  --t4b-primary:  #0d6efd;
  --t4b-secondary:  #6c757d;
  --t4b-success:    #198754;
  --t4b-info:       #0dcaf0;
  --t4b-warning:    #ffc107;
  --t4b-danger:     #dc3545;
  --t4b-light:      #f8f9fa;
  --t4b-dark:       #212529;

  --t4b-primary-rgb: 13,110,253;
  --t4b-secondary-rgb: 108,117,125;
  --t4b-success-rgb: 25,135,84;
  --t4b-info-rgb: 13,202,240;
  --t4b-warning-rgb: 255,193,7;
  --t4b-danger-rgb: 220,53,69;
  --t4b-light-rgb: 248,249,250;
  --t4b-dark-rgb: 33,37,41;
  --t4b-white-rgb: 255,255,255;
  --t4b-black-rgb: 0,0,0;

  /* Spacing */
  --t4b-global-spacing: 8px;
  --t4b-spacing-xxs:  calc(var(--t4b-global-spacing) / 4);
  --t4b-spacing-xs:   calc(var(--t4b-global-spacing) / 2);
  --t4b-spacing-sm:   var(--t4b-global-spacing);
  --t4b-spacing-md:   calc(var(--t4b-global-spacing) * 1.5);
  --t4b-spacing-lg:   calc(var(--t4b-global-spacing) * 2);
  --t4b-spacing-xl:   calc(var(--t4b-global-spacing) * 3);
  --t4b-spacing-xxl:  calc(var(--t4b-global-spacing) * 4);
 

  /* Base theme (light) */
  --t4b-block-primary:    var(--t4b-primary);
  --t4b-block-secondary:  var(--t4b-secondary);
  --t4b-block-success:    var(--t4b-success);
  --t4b-block-danger:     var(--t4b-danger);
  --t4b-block-warning:    var(--t4b-warning);
  --t4b-block-info:       var(--t4b-info);

  --t4b-block-bg: transparent;
  --t4b-block-text-1: #262626;
  --t4b-block-text-2: #737373;
  --t4b-block-border: rgba(0,0,0,0.1);

  --t4b-block-link: var(--t4b-block-primary);
  --t4b-block-link-hover: var(--t4b-block-primary);

  --t4b-block-decor-1: var(--t4b-primary);
  --t4b-block-decor-2: var(--t4b-success);
  --t4b-block-decor-3: var(--t4b-warning);
  --t4b-block-decor-4: var(--t4b-info);

  /* Block heading */
  --t4b-sec-heading-mb: calc(var(--t4b-global-spacing) * 8);
  --t4b-sec-title-mb: calc(var(--t4b-global-spacing) * 3);
  --t4b-item-title-mb: calc(var(--t4b-global-spacing) * 2);

  --t4b-sec-title-fs: 48px;
  --t4b-sec-title-fw: 500;
  --t4b-sec-title-lh: 60px;
  --t4b-sec-title-ls: -2px;
  --t4b-sec-title-text: var(--t4b-block-text-1);

  --t4b-sec-desc-fs: 20px;
  --t4b-sec-desc-text: var(--t4b-block-text-2);
  --t4b-sec-desc-fw: 500;
  --t4b-sec-desc-lh: 28px;

  --t4b-item-title-fs: 20px;
  --t4b-item-title-fw: 500;
  --t4b-item-title-lh: 28px;
  --t4b-item-title-text: var(--t4b-block-text-1);  
}

/* Dark theme */
.t4b-dark-theme {
  --t4b-block-primary:    var(--t4b-primary);
  --t4b-block-secondary:  var(--t4b-secondary);
  --t4b-block-success:    var(--t4b-success);
  --t4b-block-danger:     var(--t4b-danger);
  --t4b-block-warning:    var(--t4b-warning);
  --t4b-block-info:       var(--t4b-info);

  --t4b-block-bg:         #1E293B;
  --t4b-block-text-1:     #fff;
  --t4b-block-text-2:     #F1F5F9;
  --t4b-block-border: rgba(255,255,255,0.1);

  --t4b-block-link:       var(--t4b-elm-primary);
  --t4b-block-link-hover: var(--t4b-elm-primary);

  --t4b-block-decor-1:    var(--t4b-primary);
  --t4b-block-decor-2:    var(--t4b-success);
  --t4b-block-decor-3:    var(--t4b-warning);
  --t4b-block-decor-4:    var(--t4b-info);
}

/* Primary theme */
.t4b-primary-theme {
  --t4b-block-primary:    var(--t4b-primary);
  --t4b-block-secondary:  var(--t4b-secondary);
  --t4b-block-success:    var(--t4b-success);
  --t4b-block-danger:     var(--t4b-danger);
  --t4b-block-warning:    var(--t4b-warning);
  --t4b-block-info:       var(--t4b-info);

  --t4b-block-bg:         var(--t4b-primary);
  --t4b-block-text-1:     #fff;
  --t4b-block-text-2:     #F1F5F9;
  --t4b-block-border: rgba(255,255,255,0.1);

  --t4b-block-link:       var(--t4b-elm-primary);
  --t4b-block-link-hover: var(--t4b-elm-primary);

  --t4b-block-decor-1:    var(--t4b-primary);
  --t4b-block-decor-2:    var(--t4b-success);
  --t4b-block-decor-3:    var(--t4b-warning);
  --t4b-block-decor-4:    var(--t4b-info);
}