/**
 * CTT Design System - Color Utility Classes
 * 
 * This file provides utility classes for colors following the token hierarchy:
 * - Semantic classes use BASE tokens (recommended for most use cases)
 * - Direct color scale classes use CORE tokens (for specific design needs)
 * 
 * Token Hierarchy Reference:
 * Core Tokens (--ctt-core-*) → Base Tokens (--ctt-base-*) → Component Tokens
 * 
 * Usage Examples:
 * <div class="ctt-bg-surface-page">Page background</div>
 * <div class="ctt-bg-primary-500">Direct primary color</div>
 * <p class="ctt-text-main">Body text</p>
 * <span class="ctt-text-error">Error message</span>
 */

/* ==========================================================================
   BACKGROUND COLOR UTILITIES - SEMANTIC (BASE TOKENS)
   ========================================================================== */

/* Surface Backgrounds - Use for page and container backgrounds */
.ctt-bg-surface-page {
  background-color: var(--ctt-base-surface-page) !important;
}

.ctt-bg-surface-container {
  background-color: var(--ctt-base-surface-container) !important;
}

.ctt-bg-surface-subtle {
  background-color: var(--ctt-base-surface-subtle) !important;
}

.ctt-bg-surface-muted {
  background-color: var(--ctt-base-surface-muted) !important;
}

.ctt-bg-surface-elevated {
  background-color: var(--ctt-base-surface-elevated) !important;
}

.ctt-bg-surface-brand {
  background-color: var(--ctt-base-surface-brand) !important;
}

/* Action/Interactive Backgrounds */
.ctt-bg-action-primary {
  background-color: var(--ctt-base-action-primary-bg-default) !important;
}

.ctt-bg-action-primary-hover {
  background-color: var(--ctt-base-action-primary-bg-hover) !important;
}

.ctt-bg-action-primary-disabled {
  background-color: var(--ctt-base-action-primary-bg-disabled) !important;
}

.ctt-bg-action-secondary {
  background-color: var(--ctt-base-action-secondary-bg-default) !important;
}

.ctt-bg-action-secondary-hover {
  background-color: var(--ctt-base-action-secondary-bg-hover) !important;
}

.ctt-bg-action-secondary-disabled {
  background-color: var(--ctt-base-action-secondary-bg-disabled) !important;
}

.ctt-bg-action-tertiary {
  background-color: var(--ctt-base-action-tertiary-bg-default) !important;
}

.ctt-bg-action-tertiary-hover {
  background-color: var(--ctt-base-action-tertiary-bg-hover) !important;
}

.ctt-bg-action-tertiary-disabled {
  background-color: var(--ctt-base-action-tertiary-bg-disabled) !important;
}

.ctt-bg-action-plain {
  background-color: var(--ctt-base-action-plain-bg-default) !important;
}

.ctt-bg-action-plain-disabled {
  background-color: var(--ctt-base-action-plain-bg-disabled) !important;
}

/* State Backgrounds */
.ctt-bg-success {
  background-color: var(--ctt-base-state-success-bg) !important;
}

.ctt-bg-warning {
  background-color: var(--ctt-base-state-warning-bg) !important;
}

.ctt-bg-negative {
  background-color: var(--ctt-base-state-negative-bg) !important;
}

.ctt-bg-error {
  background-color: var(--ctt-base-state-negative-bg) !important;
}

.ctt-bg-info {
  background-color: var(--ctt-base-state-info-bg) !important;
}

.ctt-bg-highlight {
  background-color: var(--ctt-base-state-highlight-bg) !important;
}

.ctt-bg-neutral {
  background-color: var(--ctt-base-state-neutral-bg) !important;
}

/* Input Backgrounds */
.ctt-bg-input {
  background-color: var(--ctt-base-input-bg-default) !important;
}

.ctt-bg-input-disabled {
  background-color: var(--ctt-base-input-bg-disabled) !important;
}

.ctt-bg-input-readonly {
  background-color: var(--ctt-base-input-bg-readonly) !important;
}

/* ==========================================================================
   BACKGROUND COLOR UTILITIES - CORE COLOR SCALES
   Direct access to color scales for specific design needs
   ========================================================================== */

/* Primary Color Scale */
.ctt-bg-primary-50 {
  background-color: var(--ctt-core-color-primary-50) !important;
}

.ctt-bg-primary-100 {
  background-color: var(--ctt-core-color-primary-100) !important;
}

.ctt-bg-primary-200 {
  background-color: var(--ctt-core-color-primary-200) !important;
}

.ctt-bg-primary-300 {
  background-color: var(--ctt-core-color-primary-300) !important;
}

.ctt-bg-primary-400 {
  background-color: var(--ctt-core-color-primary-400) !important;
}

.ctt-bg-primary-500 {
  background-color: var(--ctt-core-color-primary-500) !important;
}

.ctt-bg-primary-600 {
  background-color: var(--ctt-core-color-primary-600) !important;
}

.ctt-bg-primary-700 {
  background-color: var(--ctt-core-color-primary-700) !important;
}

.ctt-bg-primary-800 {
  background-color: var(--ctt-core-color-primary-800) !important;
}

.ctt-bg-primary-900 {
  background-color: var(--ctt-core-color-primary-900) !important;
}

/* Neutral Color Scale */
.ctt-bg-white {
  background-color: var(--ctt-core-color-basic-white) !important;
}

.ctt-bg-neutral-50 {
  background-color: var(--ctt-core-color-neutral-50) !important;
}

.ctt-bg-neutral-100 {
  background-color: var(--ctt-core-color-neutral-100) !important;
}

.ctt-bg-neutral-200 {
  background-color: var(--ctt-core-color-neutral-200) !important;
}

.ctt-bg-neutral-300 {
  background-color: var(--ctt-core-color-neutral-300) !important;
}

.ctt-bg-neutral-400 {
  background-color: var(--ctt-core-color-neutral-400) !important;
}

.ctt-bg-neutral-500 {
  background-color: var(--ctt-core-color-neutral-500) !important;
}

.ctt-bg-neutral-600 {
  background-color: var(--ctt-core-color-neutral-600) !important;
}

.ctt-bg-neutral-700 {
  background-color: var(--ctt-core-color-neutral-700) !important;
}

.ctt-bg-neutral-800 {
  background-color: var(--ctt-core-color-neutral-800) !important;
}

.ctt-bg-neutral-900 {
  background-color: var(--ctt-core-color-neutral-900) !important;
}

.ctt-bg-black {
  background-color: var(--ctt-core-color-basic-black) !important;
}

/* Secondary - Purple Scale */
.ctt-bg-purple-50 {
  background-color: var(--ctt-core-color-secondary-purple-50) !important;
}

.ctt-bg-purple-100 {
  background-color: var(--ctt-core-color-secondary-purple-100) !important;
}

.ctt-bg-purple-200 {
  background-color: var(--ctt-core-color-secondary-purple-200) !important;
}

.ctt-bg-purple-300 {
  background-color: var(--ctt-core-color-secondary-purple-300) !important;
}

.ctt-bg-purple-400 {
  background-color: var(--ctt-core-color-secondary-purple-400) !important;
}

.ctt-bg-purple-500 {
  background-color: var(--ctt-core-color-secondary-purple-500) !important;
}

.ctt-bg-purple-600 {
  background-color: var(--ctt-core-color-secondary-purple-600) !important;
}

.ctt-bg-purple-700 {
  background-color: var(--ctt-core-color-secondary-purple-700) !important;
}

.ctt-bg-purple-800 {
  background-color: var(--ctt-core-color-secondary-purple-800) !important;
}

.ctt-bg-purple-900 {
  background-color: var(--ctt-core-color-secondary-purple-900) !important;
}

/* Secondary - Teal Scale */
.ctt-bg-teal-50 {
  background-color: var(--ctt-core-color-secondary-teal-50) !important;
}

.ctt-bg-teal-100 {
  background-color: var(--ctt-core-color-secondary-teal-100) !important;
}

.ctt-bg-teal-200 {
  background-color: var(--ctt-core-color-secondary-teal-200) !important;
}

.ctt-bg-teal-300 {
  background-color: var(--ctt-core-color-secondary-teal-300) !important;
}

.ctt-bg-teal-400 {
  background-color: var(--ctt-core-color-secondary-teal-400) !important;
}

.ctt-bg-teal-500 {
  background-color: var(--ctt-core-color-secondary-teal-500) !important;
}

.ctt-bg-teal-600 {
  background-color: var(--ctt-core-color-secondary-teal-600) !important;
}

.ctt-bg-teal-700 {
  background-color: var(--ctt-core-color-secondary-teal-700) !important;
}

.ctt-bg-teal-800 {
  background-color: var(--ctt-core-color-secondary-teal-800) !important;
}

.ctt-bg-teal-900 {
  background-color: var(--ctt-core-color-secondary-teal-900) !important;
}

/* Secondary - Green Scale */
.ctt-bg-green-50 {
  background-color: var(--ctt-core-color-secondary-green-50) !important;
}

.ctt-bg-green-100 {
  background-color: var(--ctt-core-color-secondary-green-100) !important;
}

.ctt-bg-green-200 {
  background-color: var(--ctt-core-color-secondary-green-200) !important;
}

.ctt-bg-green-300 {
  background-color: var(--ctt-core-color-secondary-green-300) !important;
}

.ctt-bg-green-400 {
  background-color: var(--ctt-core-color-secondary-green-400) !important;
}

.ctt-bg-green-500 {
  background-color: var(--ctt-core-color-secondary-green-500) !important;
}

.ctt-bg-green-600 {
  background-color: var(--ctt-core-color-secondary-green-600) !important;
}

.ctt-bg-green-700 {
  background-color: var(--ctt-core-color-secondary-green-700) !important;
}

.ctt-bg-green-800 {
  background-color: var(--ctt-core-color-secondary-green-800) !important;
}

.ctt-bg-green-900 {
  background-color: var(--ctt-core-color-secondary-green-900) !important;
}

/* Secondary - Lime Scale */
.ctt-bg-lime-50 {
  background-color: var(--ctt-core-color-secondary-lime-50) !important;
}

.ctt-bg-lime-100 {
  background-color: var(--ctt-core-color-secondary-lime-100) !important;
}

.ctt-bg-lime-200 {
  background-color: var(--ctt-core-color-secondary-lime-200) !important;
}

.ctt-bg-lime-300 {
  background-color: var(--ctt-core-color-secondary-lime-300) !important;
}

.ctt-bg-lime-400 {
  background-color: var(--ctt-core-color-secondary-lime-400) !important;
}

.ctt-bg-lime-500 {
  background-color: var(--ctt-core-color-secondary-lime-500) !important;
}

.ctt-bg-lime-600 {
  background-color: var(--ctt-core-color-secondary-lime-600) !important;
}

.ctt-bg-lime-700 {
  background-color: var(--ctt-core-color-secondary-lime-700) !important;
}

.ctt-bg-lime-800 {
  background-color: var(--ctt-core-color-secondary-lime-800) !important;
}

.ctt-bg-lime-900 {
  background-color: var(--ctt-core-color-secondary-lime-900) !important;
}

/* Semantic - Success Scale */
.ctt-bg-success-50 {
  background-color: var(--ctt-core-color-semantic-success-50) !important;
}

.ctt-bg-success-100 {
  background-color: var(--ctt-core-color-semantic-success-100) !important;
}

.ctt-bg-success-200 {
  background-color: var(--ctt-core-color-semantic-success-200) !important;
}

.ctt-bg-success-300 {
  background-color: var(--ctt-core-color-semantic-success-300) !important;
}

.ctt-bg-success-400 {
  background-color: var(--ctt-core-color-semantic-success-400) !important;
}

.ctt-bg-success-500 {
  background-color: var(--ctt-core-color-semantic-success-500) !important;
}

.ctt-bg-success-600 {
  background-color: var(--ctt-core-color-semantic-success-600) !important;
}

.ctt-bg-success-700 {
  background-color: var(--ctt-core-color-semantic-success-700) !important;
}

.ctt-bg-success-800 {
  background-color: var(--ctt-core-color-semantic-success-800) !important;
}

.ctt-bg-success-900 {
  background-color: var(--ctt-core-color-semantic-success-900) !important;
}

/* Semantic - Warning Scale */
.ctt-bg-warning-50 {
  background-color: var(--ctt-core-color-semantic-warning-50) !important;
}

.ctt-bg-warning-100 {
  background-color: var(--ctt-core-color-semantic-warning-100) !important;
}

.ctt-bg-warning-200 {
  background-color: var(--ctt-core-color-semantic-warning-200) !important;
}

.ctt-bg-warning-300 {
  background-color: var(--ctt-core-color-semantic-warning-300) !important;
}

.ctt-bg-warning-400 {
  background-color: var(--ctt-core-color-semantic-warning-400) !important;
}

.ctt-bg-warning-500 {
  background-color: var(--ctt-core-color-semantic-warning-500) !important;
}

.ctt-bg-warning-600 {
  background-color: var(--ctt-core-color-semantic-warning-600) !important;
}

.ctt-bg-warning-700 {
  background-color: var(--ctt-core-color-semantic-warning-700) !important;
}

.ctt-bg-warning-800 {
  background-color: var(--ctt-core-color-semantic-warning-800) !important;
}

.ctt-bg-warning-900 {
  background-color: var(--ctt-core-color-semantic-warning-900) !important;
}

/* Semantic - Negative/Error Scale */
.ctt-bg-negative-50,
.ctt-bg-error-50 {
  background-color: var(--ctt-core-color-semantic-negative-50) !important;
}

.ctt-bg-negative-100,
.ctt-bg-error-100 {
  background-color: var(--ctt-core-color-semantic-negative-100) !important;
}

.ctt-bg-negative-200,
.ctt-bg-error-200 {
  background-color: var(--ctt-core-color-semantic-negative-200) !important;
}

.ctt-bg-negative-300,
.ctt-bg-error-300 {
  background-color: var(--ctt-core-color-semantic-negative-300) !important;
}

.ctt-bg-negative-400,
.ctt-bg-error-400 {
  background-color: var(--ctt-core-color-semantic-negative-400) !important;
}

.ctt-bg-negative-500,
.ctt-bg-error-500 {
  background-color: var(--ctt-core-color-semantic-negative-500) !important;
}

.ctt-bg-negative-600,
.ctt-bg-error-600 {
  background-color: var(--ctt-core-color-semantic-negative-600) !important;
}

.ctt-bg-negative-700,
.ctt-bg-error-700 {
  background-color: var(--ctt-core-color-semantic-negative-700) !important;
}

.ctt-bg-negative-800,
.ctt-bg-error-800 {
  background-color: var(--ctt-core-color-semantic-negative-800) !important;
}

.ctt-bg-negative-900,
.ctt-bg-error-900 {
  background-color: var(--ctt-core-color-semantic-negative-900) !important;
}

/* Semantic - Info/Informative Scale */
.ctt-bg-info-50 {
  background-color: var(--ctt-core-color-semantic-informative-50) !important;
}

.ctt-bg-info-100 {
  background-color: var(--ctt-core-color-semantic-informative-100) !important;
}

.ctt-bg-info-200 {
  background-color: var(--ctt-core-color-semantic-informative-200) !important;
}

.ctt-bg-info-300 {
  background-color: var(--ctt-core-color-semantic-informative-300) !important;
}

.ctt-bg-info-400 {
  background-color: var(--ctt-core-color-semantic-informative-400) !important;
}

.ctt-bg-info-500 {
  background-color: var(--ctt-core-color-semantic-informative-500) !important;
}

.ctt-bg-info-600 {
  background-color: var(--ctt-core-color-semantic-informative-600) !important;
}

.ctt-bg-info-700 {
  background-color: var(--ctt-core-color-semantic-informative-700) !important;
}

.ctt-bg-info-800 {
  background-color: var(--ctt-core-color-semantic-informative-800) !important;
}

.ctt-bg-info-900 {
  background-color: var(--ctt-core-color-semantic-informative-900) !important;
}

/* ==========================================================================
   TEXT COLOR UTILITIES - SEMANTIC (BASE TOKENS)
   ========================================================================== */

/* Semantic Text Colors - Recommended for most use cases */
.ctt-text-main {
  color: var(--ctt-base-text-main) !important;
}

.ctt-text-weak {
  color: var(--ctt-base-text-weak) !important;
}

.ctt-text-strong {
  color: var(--ctt-base-text-strong) !important;
}

.ctt-text-inverse {
  color: var(--ctt-base-text-inverse) !important;
}

.ctt-text-brand {
  color: var(--ctt-base-text-brand) !important;
}

/* State Text Colors */
.ctt-text-success {
  color: var(--ctt-base-state-success-fg) !important;
}

.ctt-text-warning {
  color: var(--ctt-base-state-warning-fg) !important;
}

.ctt-text-negative {
  color: var(--ctt-base-state-negative-fg) !important;
}

.ctt-text-error {
  color: var(--ctt-base-state-error-fg) !important;
}

.ctt-text-info {
  color: var(--ctt-base-state-info-fg) !important;
}

.ctt-text-highlight {
  color: var(--ctt-base-state-highlight-fg) !important;
}

.ctt-text-neutral {
  color: var(--ctt-base-state-neutral-fg) !important;
}

/* Action Text Colors */
.ctt-text-action-primary {
  color: var(--ctt-base-action-primary-fg-default) !important;
}

.ctt-text-action-secondary {
  color: var(--ctt-base-action-secondary-fg-default) !important;
}

.ctt-text-action-tertiary {
  color: var(--ctt-base-action-tertiary-fg-default) !important;
}

.ctt-text-action-plain {
  color: var(--ctt-base-action-plain-fg-default) !important;
}

/* Input Text Colors */
.ctt-text-input {
  color: var(--ctt-base-input-fg-default) !important;
}

.ctt-text-input-placeholder {
  color: var(--ctt-base-input-fg-placeholder) !important;
}

.ctt-text-input-disabled {
  color: var(--ctt-base-input-fg-disabled) !important;
}

/* Link Text Colors */
.ctt-text-link {
  color: var(--ctt-base-link-fg-default) !important;
}

.ctt-text-link-hover {
  color: var(--ctt-base-link-fg-hover) !important;
}

.ctt-text-link-disabled {
  color: var(--ctt-base-link-fg-disabled) !important;
}

/* On Surface Text Colors */
.ctt-text-on-primary {
  color: var(--ctt-base-on-primary-fg) !important;
}

.ctt-text-on-secondary {
  color: var(--ctt-base-on-secondary-fg) !important;
}

.ctt-text-on-surface {
  color: var(--ctt-base-on-surface-fg) !important;
}

.ctt-text-on-muted {
  color: var(--ctt-base-on-muted-fg) !important;
}

.ctt-text-on-success {
  color: var(--ctt-base-on-success-fg) !important;
}

.ctt-text-on-warning {
  color: var(--ctt-base-on-warning-fg) !important;
}

.ctt-text-on-negative {
  color: var(--ctt-base-on-negative-fg) !important;
}

.ctt-text-on-info {
  color: var(--ctt-base-on-info-fg) !important;
}

.ctt-text-on-highlight {
  color: var(--ctt-base-on-highlight-fg) !important;
}

.ctt-text-on-neutral {
  color: var(--ctt-base-on-neutral-fg) !important;
}

/* ==========================================================================
   TEXT COLOR UTILITIES - CORE COLOR SCALES
   Direct access to color scales for specific design needs
   ========================================================================== */

/* Primary Color Scale */
.ctt-text-primary-50 {
  color: var(--ctt-core-color-primary-50) !important;
}

.ctt-text-primary-100 {
  color: var(--ctt-core-color-primary-100) !important;
}

.ctt-text-primary-200 {
  color: var(--ctt-core-color-primary-200) !important;
}

.ctt-text-primary-300 {
  color: var(--ctt-core-color-primary-300) !important;
}

.ctt-text-primary-400 {
  color: var(--ctt-core-color-primary-400) !important;
}

.ctt-text-primary-500 {
  color: var(--ctt-core-color-primary-500) !important;
}

.ctt-text-primary-600 {
  color: var(--ctt-core-color-primary-600) !important;
}

.ctt-text-primary-700 {
  color: var(--ctt-core-color-primary-700) !important;
}

.ctt-text-primary-800 {
  color: var(--ctt-core-color-primary-800) !important;
}

.ctt-text-primary-900 {
  color: var(--ctt-core-color-primary-900) !important;
}

/* Neutral Color Scale */
.ctt-text-white {
  color: var(--ctt-core-color-basic-white) !important;
}

.ctt-text-neutral-50 {
  color: var(--ctt-core-color-neutral-50) !important;
}

.ctt-text-neutral-100 {
  color: var(--ctt-core-color-neutral-100) !important;
}

.ctt-text-neutral-200 {
  color: var(--ctt-core-color-neutral-200) !important;
}

.ctt-text-neutral-300 {
  color: var(--ctt-core-color-neutral-300) !important;
}

.ctt-text-neutral-400 {
  color: var(--ctt-core-color-neutral-400) !important;
}

.ctt-text-neutral-500 {
  color: var(--ctt-core-color-neutral-500) !important;
}

.ctt-text-neutral-600 {
  color: var(--ctt-core-color-neutral-600) !important;
}

.ctt-text-neutral-700 {
  color: var(--ctt-core-color-neutral-700) !important;
}

.ctt-text-neutral-800 {
  color: var(--ctt-core-color-neutral-800) !important;
}

.ctt-text-neutral-900 {
  color: var(--ctt-core-color-neutral-900) !important;
}

.ctt-text-black {
  color: var(--ctt-core-color-basic-black) !important;
}

/* Secondary - Purple Scale */
.ctt-text-purple-50 {
  color: var(--ctt-core-color-secondary-purple-50) !important;
}

.ctt-text-purple-100 {
  color: var(--ctt-core-color-secondary-purple-100) !important;
}

.ctt-text-purple-200 {
  color: var(--ctt-core-color-secondary-purple-200) !important;
}

.ctt-text-purple-300 {
  color: var(--ctt-core-color-secondary-purple-300) !important;
}

.ctt-text-purple-400 {
  color: var(--ctt-core-color-secondary-purple-400) !important;
}

.ctt-text-purple-500 {
  color: var(--ctt-core-color-secondary-purple-500) !important;
}

.ctt-text-purple-600 {
  color: var(--ctt-core-color-secondary-purple-600) !important;
}

.ctt-text-purple-700 {
  color: var(--ctt-core-color-secondary-purple-700) !important;
}

.ctt-text-purple-800 {
  color: var(--ctt-core-color-secondary-purple-800) !important;
}

.ctt-text-purple-900 {
  color: var(--ctt-core-color-secondary-purple-900) !important;
}

/* Secondary - Teal Scale */
.ctt-text-teal-50 {
  color: var(--ctt-core-color-secondary-teal-50) !important;
}

.ctt-text-teal-100 {
  color: var(--ctt-core-color-secondary-teal-100) !important;
}

.ctt-text-teal-200 {
  color: var(--ctt-core-color-secondary-teal-200) !important;
}

.ctt-text-teal-300 {
  color: var(--ctt-core-color-secondary-teal-300) !important;
}

.ctt-text-teal-400 {
  color: var(--ctt-core-color-secondary-teal-400) !important;
}

.ctt-text-teal-500 {
  color: var(--ctt-core-color-secondary-teal-500) !important;
}

.ctt-text-teal-600 {
  color: var(--ctt-core-color-secondary-teal-600) !important;
}

.ctt-text-teal-700 {
  color: var(--ctt-core-color-secondary-teal-700) !important;
}

.ctt-text-teal-800 {
  color: var(--ctt-core-color-secondary-teal-800) !important;
}

.ctt-text-teal-900 {
  color: var(--ctt-core-color-secondary-teal-900) !important;
}

/* Secondary - Green Scale */
.ctt-text-green-50 {
  color: var(--ctt-core-color-secondary-green-50) !important;
}

.ctt-text-green-100 {
  color: var(--ctt-core-color-secondary-green-100) !important;
}

.ctt-text-green-200 {
  color: var(--ctt-core-color-secondary-green-200) !important;
}

.ctt-text-green-300 {
  color: var(--ctt-core-color-secondary-green-300) !important;
}

.ctt-text-green-400 {
  color: var(--ctt-core-color-secondary-green-400) !important;
}

.ctt-text-green-500 {
  color: var(--ctt-core-color-secondary-green-500) !important;
}

.ctt-text-green-600 {
  color: var(--ctt-core-color-secondary-green-600) !important;
}

.ctt-text-green-700 {
  color: var(--ctt-core-color-secondary-green-700) !important;
}

.ctt-text-green-800 {
  color: var(--ctt-core-color-secondary-green-800) !important;
}

.ctt-text-green-900 {
  color: var(--ctt-core-color-secondary-green-900) !important;
}

/* Secondary - Lime Scale */
.ctt-text-lime-50 {
  color: var(--ctt-core-color-secondary-lime-50) !important;
}

.ctt-text-lime-100 {
  color: var(--ctt-core-color-secondary-lime-100) !important;
}

.ctt-text-lime-200 {
  color: var(--ctt-core-color-secondary-lime-200) !important;
}

.ctt-text-lime-300 {
  color: var(--ctt-core-color-secondary-lime-300) !important;
}

.ctt-text-lime-400 {
  color: var(--ctt-core-color-secondary-lime-400) !important;
}

.ctt-text-lime-500 {
  color: var(--ctt-core-color-secondary-lime-500) !important;
}

.ctt-text-lime-600 {
  color: var(--ctt-core-color-secondary-lime-600) !important;
}

.ctt-text-lime-700 {
  color: var(--ctt-core-color-secondary-lime-700) !important;
}

.ctt-text-lime-800 {
  color: var(--ctt-core-color-secondary-lime-800) !important;
}

.ctt-text-lime-900 {
  color: var(--ctt-core-color-secondary-lime-900) !important;
}

/* Semantic - Success Scale */
.ctt-text-success-50 {
  color: var(--ctt-core-color-semantic-success-50) !important;
}

.ctt-text-success-100 {
  color: var(--ctt-core-color-semantic-success-100) !important;
}

.ctt-text-success-200 {
  color: var(--ctt-core-color-semantic-success-200) !important;
}

.ctt-text-success-300 {
  color: var(--ctt-core-color-semantic-success-300) !important;
}

.ctt-text-success-400 {
  color: var(--ctt-core-color-semantic-success-400) !important;
}

.ctt-text-success-500 {
  color: var(--ctt-core-color-semantic-success-500) !important;
}

.ctt-text-success-600 {
  color: var(--ctt-core-color-semantic-success-600) !important;
}

.ctt-text-success-700 {
  color: var(--ctt-core-color-semantic-success-700) !important;
}

.ctt-text-success-800 {
  color: var(--ctt-core-color-semantic-success-800) !important;
}

.ctt-text-success-900 {
  color: var(--ctt-core-color-semantic-success-900) !important;
}

/* Semantic - Warning Scale */
.ctt-text-warning-50 {
  color: var(--ctt-core-color-semantic-warning-50) !important;
}

.ctt-text-warning-100 {
  color: var(--ctt-core-color-semantic-warning-100) !important;
}

.ctt-text-warning-200 {
  color: var(--ctt-core-color-semantic-warning-200) !important;
}

.ctt-text-warning-300 {
  color: var(--ctt-core-color-semantic-warning-300) !important;
}

.ctt-text-warning-400 {
  color: var(--ctt-core-color-semantic-warning-400) !important;
}

.ctt-text-warning-500 {
  color: var(--ctt-core-color-semantic-warning-500) !important;
}

.ctt-text-warning-600 {
  color: var(--ctt-core-color-semantic-warning-600) !important;
}

.ctt-text-warning-700 {
  color: var(--ctt-core-color-semantic-warning-700) !important;
}

.ctt-text-warning-800 {
  color: var(--ctt-core-color-semantic-warning-800) !important;
}

.ctt-text-warning-900 {
  color: var(--ctt-core-color-semantic-warning-900) !important;
}

/* Semantic - Error/Negative Scale */
.ctt-text-negative-50,
.ctt-text-error-50 {
  color: var(--ctt-core-color-semantic-negative-50) !important;
}

.ctt-text-negative-100,
.ctt-text-error-100 {
  color: var(--ctt-core-color-semantic-negative-100) !important;
}

.ctt-text-negative-200,
.ctt-text-error-200 {
  color: var(--ctt-core-color-semantic-negative-200) !important;
}

.ctt-text-negative-300,
.ctt-text-error-300 {
  color: var(--ctt-core-color-semantic-negative-300) !important;
}

.ctt-text-negative-400,
.ctt-text-error-400 {
  color: var(--ctt-core-color-semantic-negative-400) !important;
}

.ctt-text-negative-500,
.ctt-text-error-500 {
  color: var(--ctt-core-color-semantic-negative-500) !important;
}

.ctt-text-negative-600,
.ctt-text-error-600 {
  color: var(--ctt-core-color-semantic-negative-600) !important;
}

.ctt-text-negative-700,
.ctt-text-error-700 {
  color: var(--ctt-core-color-semantic-negative-700) !important;
}

.ctt-text-negative-800,
.ctt-text-error-800 {
  color: var(--ctt-core-color-semantic-negative-800) !important;
}

.ctt-text-negative-900,
.ctt-text-error-900 {
  color: var(--ctt-core-color-semantic-negative-900) !important;
}

/* Semantic - Info/Informative Scale */
.ctt-text-info-50 {
  color: var(--ctt-core-color-semantic-informative-50) !important;
}

.ctt-text-info-100 {
  color: var(--ctt-core-color-semantic-informative-100) !important;
}

.ctt-text-info-200 {
  color: var(--ctt-core-color-semantic-informative-200) !important;
}

.ctt-text-info-300 {
  color: var(--ctt-core-color-semantic-informative-300) !important;
}

.ctt-text-info-400 {
  color: var(--ctt-core-color-semantic-informative-400) !important;
}

.ctt-text-info-500 {
  color: var(--ctt-core-color-semantic-informative-500) !important;
}

.ctt-text-info-600 {
  color: var(--ctt-core-color-semantic-informative-600) !important;
}

.ctt-text-info-700 {
  color: var(--ctt-core-color-semantic-informative-700) !important;
}

.ctt-text-info-800 {
  color: var(--ctt-core-color-semantic-informative-800) !important;
}

.ctt-text-info-900 {
  color: var(--ctt-core-color-semantic-informative-900) !important;
}

/* ==========================================================================
   BORDER COLOR UTILITIES - SEMANTIC (BASE TOKENS)
   ========================================================================== */

/* Semantic Border Colors - Recommended for most use cases */
.ctt-border-subtle {
  border-color: var(--ctt-base-border-subtle) !important;
}

.ctt-border-default {
  border-color: var(--ctt-base-border-default) !important;
}

.ctt-border-strong {
  border-color: var(--ctt-base-border-strong) !important;
}

.ctt-border-focus {
  border-color: var(--ctt-base-border-focus) !important;
}

.ctt-border-error {
  border-color: var(--ctt-base-border-error) !important;
}

.ctt-border-primary {
  border-color: var(--ctt-base-border-primary) !important;
}

/* State Border Colors */
.ctt-border-success {
  border-color: var(--ctt-base-state-success-border) !important;
}

.ctt-border-warning {
  border-color: var(--ctt-base-state-warning-border) !important;
}

.ctt-border-info {
  border-color: var(--ctt-base-state-info-border) !important;
}

.ctt-border-highlight {
  border-color: var(--ctt-base-state-highlight-border) !important;
}

.ctt-border-neutral {
  border-color: var(--ctt-base-state-neutral-border) !important;
}

/* Input Border Colors */
.ctt-border-input {
  border-color: var(--ctt-base-input-border-default) !important;
}

.ctt-border-input-hover {
  border-color: var(--ctt-base-input-border-hover) !important;
}

.ctt-border-input-active {
  border-color: var(--ctt-base-input-border-active) !important;
}

.ctt-border-input-disabled {
  border-color: var(--ctt-base-input-border-disabled) !important;
}

/* Action Border Colors */
.ctt-border-action-primary {
  border-color: var(--ctt-base-action-primary-border-default) !important;
}

.ctt-border-action-secondary {
  border-color: var(--ctt-base-action-secondary-border-default) !important;
}

.ctt-border-action-tertiary {
  border-color: var(--ctt-base-action-tertiary-border-default) !important;
}

/* ==========================================================================
   BORDER COLOR UTILITIES - CORE COLOR SCALES
   Direct access to color scales for specific design needs
   ========================================================================== */

/* Primary Color Scale */
.ctt-border-primary-50 {
  border-color: var(--ctt-core-color-primary-50) !important;
}

.ctt-border-primary-100 {
  border-color: var(--ctt-core-color-primary-100) !important;
}

.ctt-border-primary-200 {
  border-color: var(--ctt-core-color-primary-200) !important;
}

.ctt-border-primary-300 {
  border-color: var(--ctt-core-color-primary-300) !important;
}

.ctt-border-primary-400 {
  border-color: var(--ctt-core-color-primary-400) !important;
}

.ctt-border-primary-500 {
  border-color: var(--ctt-core-color-primary-500) !important;
}

.ctt-border-primary-600 {
  border-color: var(--ctt-core-color-primary-600) !important;
}

.ctt-border-primary-700 {
  border-color: var(--ctt-core-color-primary-700) !important;
}

.ctt-border-primary-800 {
  border-color: var(--ctt-core-color-primary-800) !important;
}

.ctt-border-primary-900 {
  border-color: var(--ctt-core-color-primary-900) !important;
}

/* Neutral Color Scale */
.ctt-border-white {
  border-color: var(--ctt-core-color-basic-white) !important;
}

.ctt-border-neutral-50 {
  border-color: var(--ctt-core-color-neutral-50) !important;
}

.ctt-border-neutral-100 {
  border-color: var(--ctt-core-color-neutral-100) !important;
}

.ctt-border-neutral-200 {
  border-color: var(--ctt-core-color-neutral-200) !important;
}

.ctt-border-neutral-300 {
  border-color: var(--ctt-core-color-neutral-300) !important;
}

.ctt-border-neutral-400 {
  border-color: var(--ctt-core-color-neutral-400) !important;
}

.ctt-border-neutral-500 {
  border-color: var(--ctt-core-color-neutral-500) !important;
}

.ctt-border-neutral-600 {
  border-color: var(--ctt-core-color-neutral-600) !important;
}

.ctt-border-neutral-700 {
  border-color: var(--ctt-core-color-neutral-700) !important;
}

.ctt-border-neutral-800 {
  border-color: var(--ctt-core-color-neutral-800) !important;
}

.ctt-border-neutral-900 {
  border-color: var(--ctt-core-color-neutral-900) !important;
}

.ctt-border-black {
  border-color: var(--ctt-core-color-basic-black) !important;
}

/* Secondary - Purple Scale */
.ctt-border-purple-50 {
  border-color: var(--ctt-core-color-secondary-purple-50) !important;
}

.ctt-border-purple-100 {
  border-color: var(--ctt-core-color-secondary-purple-100) !important;
}

.ctt-border-purple-200 {
  border-color: var(--ctt-core-color-secondary-purple-200) !important;
}

.ctt-border-purple-300 {
  border-color: var(--ctt-core-color-secondary-purple-300) !important;
}

.ctt-border-purple-400 {
  border-color: var(--ctt-core-color-secondary-purple-400) !important;
}

.ctt-border-purple-500 {
  border-color: var(--ctt-core-color-secondary-purple-500) !important;
}

.ctt-border-purple-600 {
  border-color: var(--ctt-core-color-secondary-purple-600) !important;
}

.ctt-border-purple-700 {
  border-color: var(--ctt-core-color-secondary-purple-700) !important;
}

.ctt-border-purple-800 {
  border-color: var(--ctt-core-color-secondary-purple-800) !important;
}

.ctt-border-purple-900 {
  border-color: var(--ctt-core-color-secondary-purple-900) !important;
}

/* Secondary - Teal Scale */
.ctt-border-teal-50 {
  border-color: var(--ctt-core-color-secondary-teal-50) !important;
}

.ctt-border-teal-100 {
  border-color: var(--ctt-core-color-secondary-teal-100) !important;
}

.ctt-border-teal-200 {
  border-color: var(--ctt-core-color-secondary-teal-200) !important;
}

.ctt-border-teal-300 {
  border-color: var(--ctt-core-color-secondary-teal-300) !important;
}

.ctt-border-teal-400 {
  border-color: var(--ctt-core-color-secondary-teal-400) !important;
}

.ctt-border-teal-500 {
  border-color: var(--ctt-core-color-secondary-teal-500) !important;
}

.ctt-border-teal-600 {
  border-color: var(--ctt-core-color-secondary-teal-600) !important;
}

.ctt-border-teal-700 {
  border-color: var(--ctt-core-color-secondary-teal-700) !important;
}

.ctt-border-teal-800 {
  border-color: var(--ctt-core-color-secondary-teal-800) !important;
}

.ctt-border-teal-900 {
  border-color: var(--ctt-core-color-secondary-teal-900) !important;
}

/* Secondary - Green Scale */
.ctt-border-green-50 {
  border-color: var(--ctt-core-color-secondary-green-50) !important;
}

.ctt-border-green-100 {
  border-color: var(--ctt-core-color-secondary-green-100) !important;
}

.ctt-border-green-200 {
  border-color: var(--ctt-core-color-secondary-green-200) !important;
}

.ctt-border-green-300 {
  border-color: var(--ctt-core-color-secondary-green-300) !important;
}

.ctt-border-green-400 {
  border-color: var(--ctt-core-color-secondary-green-400) !important;
}

.ctt-border-green-500 {
  border-color: var(--ctt-core-color-secondary-green-500) !important;
}

.ctt-border-green-600 {
  border-color: var(--ctt-core-color-secondary-green-600) !important;
}

.ctt-border-green-700 {
  border-color: var(--ctt-core-color-secondary-green-700) !important;
}

.ctt-border-green-800 {
  border-color: var(--ctt-core-color-secondary-green-800) !important;
}

.ctt-border-green-900 {
  border-color: var(--ctt-core-color-secondary-green-900) !important;
}

/* Secondary - Lime Scale */
.ctt-border-lime-50 {
  border-color: var(--ctt-core-color-secondary-lime-50) !important;
}

.ctt-border-lime-100 {
  border-color: var(--ctt-core-color-secondary-lime-100) !important;
}

.ctt-border-lime-200 {
  border-color: var(--ctt-core-color-secondary-lime-200) !important;
}

.ctt-border-lime-300 {
  border-color: var(--ctt-core-color-secondary-lime-300) !important;
}

.ctt-border-lime-400 {
  border-color: var(--ctt-core-color-secondary-lime-400) !important;
}

.ctt-border-lime-500 {
  border-color: var(--ctt-core-color-secondary-lime-500) !important;
}

.ctt-border-lime-600 {
  border-color: var(--ctt-core-color-secondary-lime-600) !important;
}

.ctt-border-lime-700 {
  border-color: var(--ctt-core-color-secondary-lime-700) !important;
}

.ctt-border-lime-800 {
  border-color: var(--ctt-core-color-secondary-lime-800) !important;
}

.ctt-border-lime-900 {
  border-color: var(--ctt-core-color-secondary-lime-900) !important;
}

/* Semantic - Success Scale */
.ctt-border-success-50 {
  border-color: var(--ctt-core-color-semantic-success-50) !important;
}

.ctt-border-success-100 {
  border-color: var(--ctt-core-color-semantic-success-100) !important;
}

.ctt-border-success-200 {
  border-color: var(--ctt-core-color-semantic-success-200) !important;
}

.ctt-border-success-300 {
  border-color: var(--ctt-core-color-semantic-success-300) !important;
}

.ctt-border-success-400 {
  border-color: var(--ctt-core-color-semantic-success-400) !important;
}

.ctt-border-success-500 {
  border-color: var(--ctt-core-color-semantic-success-500) !important;
}

.ctt-border-success-600 {
  border-color: var(--ctt-core-color-semantic-success-600) !important;
}

.ctt-border-success-700 {
  border-color: var(--ctt-core-color-semantic-success-700) !important;
}

.ctt-border-success-800 {
  border-color: var(--ctt-core-color-semantic-success-800) !important;
}

.ctt-border-success-900 {
  border-color: var(--ctt-core-color-semantic-success-900) !important;
}

/* Semantic - Warning Scale */
.ctt-border-warning-50 {
  border-color: var(--ctt-core-color-semantic-warning-50) !important;
}

.ctt-border-warning-100 {
  border-color: var(--ctt-core-color-semantic-warning-100) !important;
}

.ctt-border-warning-200 {
  border-color: var(--ctt-core-color-semantic-warning-200) !important;
}

.ctt-border-warning-300 {
  border-color: var(--ctt-core-color-semantic-warning-300) !important;
}

.ctt-border-warning-400 {
  border-color: var(--ctt-core-color-semantic-warning-400) !important;
}

.ctt-border-warning-500 {
  border-color: var(--ctt-core-color-semantic-warning-500) !important;
}

.ctt-border-warning-600 {
  border-color: var(--ctt-core-color-semantic-warning-600) !important;
}

.ctt-border-warning-700 {
  border-color: var(--ctt-core-color-semantic-warning-700) !important;
}

.ctt-border-warning-800 {
  border-color: var(--ctt-core-color-semantic-warning-800) !important;
}

.ctt-border-warning-900 {
  border-color: var(--ctt-core-color-semantic-warning-900) !important;
}

/* Semantic - Error/Negative Scale */
.ctt-border-negative-50,
.ctt-border-error-50 {
  border-color: var(--ctt-core-color-semantic-negative-50) !important;
}

.ctt-border-negative-100,
.ctt-border-error-100 {
  border-color: var(--ctt-core-color-semantic-negative-100) !important;
}

.ctt-border-negative-200,
.ctt-border-error-200 {
  border-color: var(--ctt-core-color-semantic-negative-200) !important;
}

.ctt-border-negative-300,
.ctt-border-error-300 {
  border-color: var(--ctt-core-color-semantic-negative-300) !important;
}

.ctt-border-negative-400,
.ctt-border-error-400 {
  border-color: var(--ctt-core-color-semantic-negative-400) !important;
}

.ctt-border-negative-500,
.ctt-border-error-500 {
  border-color: var(--ctt-core-color-semantic-negative-500) !important;
}

.ctt-border-negative-600,
.ctt-border-error-600 {
  border-color: var(--ctt-core-color-semantic-negative-600) !important;
}

.ctt-border-negative-700,
.ctt-border-error-700 {
  border-color: var(--ctt-core-color-semantic-negative-700) !important;
}

.ctt-border-negative-800,
.ctt-border-error-800 {
  border-color: var(--ctt-core-color-semantic-negative-800) !important;
}

.ctt-border-negative-900,
.ctt-border-error-900 {
  border-color: var(--ctt-core-color-semantic-negative-900) !important;
}

/* Semantic - Info/Informative Scale */
.ctt-border-info-50 {
  border-color: var(--ctt-core-color-semantic-informative-50) !important;
}

.ctt-border-info-100 {
  border-color: var(--ctt-core-color-semantic-informative-100) !important;
}

.ctt-border-info-200 {
  border-color: var(--ctt-core-color-semantic-informative-200) !important;
}

.ctt-border-info-300 {
  border-color: var(--ctt-core-color-semantic-informative-300) !important;
}

.ctt-border-info-400 {
  border-color: var(--ctt-core-color-semantic-informative-400) !important;
}

.ctt-border-info-500 {
  border-color: var(--ctt-core-color-semantic-informative-500) !important;
}

.ctt-border-info-600 {
  border-color: var(--ctt-core-color-semantic-informative-600) !important;
}

.ctt-border-info-700 {
  border-color: var(--ctt-core-color-semantic-informative-700) !important;
}

.ctt-border-info-800 {
  border-color: var(--ctt-core-color-semantic-informative-800) !important;
}

.ctt-border-info-900 {
  border-color: var(--ctt-core-color-semantic-informative-900) !important;
}

/* ==========================================================================
   BORDER WIDTH UTILITIES (BASE TOKENS)
   ========================================================================== */

.ctt-border-0 {
  border-width: 0 !important;
}

.ctt-border-hairline {
  border-width: var(--ctt-base-shape-border-width-hairline) !important;
}

.ctt-border-thin {
  border-width: var(--ctt-base-shape-border-width-thin) !important;
}

.ctt-border-thick {
  border-width: var(--ctt-base-shape-border-width-thick) !important;
}

/* Border sides */
.ctt-border-t {
  border-top-width: var(--ctt-base-shape-border-width-hairline) !important;
  border-top-style: solid !important;
}

.ctt-border-r {
  border-right-width: var(--ctt-base-shape-border-width-hairline) !important;
  border-right-style: solid !important;
}

.ctt-border-b {
  border-bottom-width: var(--ctt-base-shape-border-width-hairline) !important;
  border-bottom-style: solid !important;
}

.ctt-border-l {
  border-left-width: var(--ctt-base-shape-border-width-hairline) !important;
  border-left-style: solid !important;
}

/* Border all sides */
.ctt-border {
  border-width: var(--ctt-base-shape-border-width-hairline) !important;
  border-style: solid !important;
}

/* ==========================================================================
   BORDER RADIUS UTILITIES (BASE TOKENS)
   ========================================================================== */

.ctt-rounded-none {
  border-radius: var(--ctt-base-shape-radius-none) !important;
}

.ctt-rounded-xs {
  border-radius: var(--ctt-base-shape-radius-xs) !important;
}

.ctt-rounded-sm {
  border-radius: var(--ctt-base-shape-radius-sm) !important;
}

.ctt-rounded-md {
  border-radius: var(--ctt-base-shape-radius-md) !important;
}

.ctt-rounded-lg {
  border-radius: var(--ctt-base-shape-radius-lg) !important;
}

.ctt-rounded-xl {
  border-radius: var(--ctt-base-shape-radius-xl) !important;
}

.ctt-rounded-2xl {
  border-radius: var(--ctt-base-shape-radius-2xl) !important;
}

.ctt-rounded-pill {
  border-radius: var(--ctt-base-shape-radius-pill) !important;
}

/* Rounded corners - individual sides */
.ctt-rounded-t-none {
  border-top-left-radius: var(--ctt-base-shape-radius-none) !important;
  border-top-right-radius: var(--ctt-base-shape-radius-none) !important;
}

.ctt-rounded-t-xs {
  border-top-left-radius: var(--ctt-base-shape-radius-xs) !important;
  border-top-right-radius: var(--ctt-base-shape-radius-xs) !important;
}

.ctt-rounded-t-sm {
  border-top-left-radius: var(--ctt-base-shape-radius-sm) !important;
  border-top-right-radius: var(--ctt-base-shape-radius-sm) !important;
}

.ctt-rounded-t-md {
  border-top-left-radius: var(--ctt-base-shape-radius-md) !important;
  border-top-right-radius: var(--ctt-base-shape-radius-md) !important;
}

.ctt-rounded-t-lg {
  border-top-left-radius: var(--ctt-base-shape-radius-lg) !important;
  border-top-right-radius: var(--ctt-base-shape-radius-lg) !important;
}

.ctt-rounded-b-none {
  border-bottom-left-radius: var(--ctt-base-shape-radius-none) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-none) !important;
}

.ctt-rounded-b-xs {
  border-bottom-left-radius: var(--ctt-base-shape-radius-xs) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-xs) !important;
}

.ctt-rounded-b-sm {
  border-bottom-left-radius: var(--ctt-base-shape-radius-sm) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-sm) !important;
}

.ctt-rounded-b-md {
  border-bottom-left-radius: var(--ctt-base-shape-radius-md) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-md) !important;
}

.ctt-rounded-b-lg {
  border-bottom-left-radius: var(--ctt-base-shape-radius-lg) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-lg) !important;
}

.ctt-rounded-l-none {
  border-top-left-radius: var(--ctt-base-shape-radius-none) !important;
  border-bottom-left-radius: var(--ctt-base-shape-radius-none) !important;
}

.ctt-rounded-l-xs {
  border-top-left-radius: var(--ctt-base-shape-radius-xs) !important;
  border-bottom-left-radius: var(--ctt-base-shape-radius-xs) !important;
}

.ctt-rounded-l-sm {
  border-top-left-radius: var(--ctt-base-shape-radius-sm) !important;
  border-bottom-left-radius: var(--ctt-base-shape-radius-sm) !important;
}

.ctt-rounded-l-md {
  border-top-left-radius: var(--ctt-base-shape-radius-md) !important;
  border-bottom-left-radius: var(--ctt-base-shape-radius-md) !important;
}

.ctt-rounded-l-lg {
  border-top-left-radius: var(--ctt-base-shape-radius-lg) !important;
  border-bottom-left-radius: var(--ctt-base-shape-radius-lg) !important;
}

.ctt-rounded-r-none {
  border-top-right-radius: var(--ctt-base-shape-radius-none) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-none) !important;
}

.ctt-rounded-r-xs {
  border-top-right-radius: var(--ctt-base-shape-radius-xs) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-xs) !important;
}

.ctt-rounded-r-sm {
  border-top-right-radius: var(--ctt-base-shape-radius-sm) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-sm) !important;
}

.ctt-rounded-r-md {
  border-top-right-radius: var(--ctt-base-shape-radius-md) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-md) !important;
}

.ctt-rounded-r-lg {
  border-top-right-radius: var(--ctt-base-shape-radius-lg) !important;
  border-bottom-right-radius: var(--ctt-base-shape-radius-lg) !important;
}