/**
 * Main Stylesheet
 * This file imports all the design system styles in the correct order.
 * 
 * Import Order:
 * 1. Design tokens (CSS variables)
 * 2. Font definitions
 * 3. Typography system
 * 4. Color utilities
 * 5. Spacing and layout utilities
 * 6. Icon classes
 * 7. Advanced utilities (borders, shadows, transitions, etc.)
 */

/* ========================================================================
   1. DESIGN TOKENS - Foundation
   ======================================================================== */

/* --- inlined: tokens.css --- */
/**
 * CTT Design System - Core Tokens v2
 * 
 * This file contains core-level design tokens that serve as the foundation
 * for the entire design system. These tokens should be referenced by 
 * component-specific tokens rather than used directly in components.
 * 
 * Token Hierarchy:
 * Brand Tokens → Core Tokens (this file) → Base Tokens → Component Tokens
 */

:root {
  /* ========================================================================
     COLORS - PRIMARY
     ======================================================================== */
  --ctt-core-color-primary-50: #feeaec;
  --ctt-core-color-primary-100: #f9ccd3;
  --ctt-core-color-primary-200: #f299a7;
  --ctt-core-color-primary-300: #eb667c;
  --ctt-core-color-primary-400: #e63350;
  --ctt-core-color-primary-500: #df0024;
  --ctt-core-color-primary-600: #ba1d31;
  --ctt-core-color-primary-700: #951727;
  --ctt-core-color-primary-800: #6f101d;
  --ctt-core-color-primary-900: #4a0a13;

  /* ========================================================================
     COLORS - BASIC
     ======================================================================== */
  --ctt-core-color-basic-white: #ffffff;
  --ctt-core-color-basic-black: #000000;

  /* ========================================================================
     COLORS - NEUTRAL
     ======================================================================== */
  --ctt-core-color-neutral-50: #fafafa;
  --ctt-core-color-neutral-100: #f2f2f2;
  --ctt-core-color-neutral-200: #e2e2e2;
  --ctt-core-color-neutral-300: #c9c9c9;
  --ctt-core-color-neutral-400: #a1a1a1;
  --ctt-core-color-neutral-500: #808080;
  --ctt-core-color-neutral-600: #666666;
  --ctt-core-color-neutral-700: #4c4c4c;
  --ctt-core-color-neutral-800: #333333;
  --ctt-core-color-neutral-900: #1a1a1a;

  /* ========================================================================
     COLORS - SECONDARY - PURPLE
     ======================================================================== */
  /* ========================================================================
     COLORS - SECONDARY - PURPLE
     ======================================================================== */
  --ctt-core-color-secondary-purple-50: #f5ecf6;
  --ctt-core-color-secondary-purple-100: #e6d1e6;
  --ctt-core-color-secondary-purple-200: #cda5cd;
  --ctt-core-color-secondary-purple-300: #b377b3;
  --ctt-core-color-secondary-purple-400: #9a4b9a;
  --ctt-core-color-secondary-purple-500: #821e82;
  --ctt-core-color-secondary-purple-600: #681868;
  --ctt-core-color-secondary-purple-700: #4e124e;
  --ctt-core-color-secondary-purple-800: #340c34;
  --ctt-core-color-secondary-purple-900: #1a061a;

  /* ========================================================================
     COLORS - SECONDARY - TEAL
     ======================================================================== */
  --ctt-core-color-secondary-teal-50: #e6fbfa;
  --ctt-core-color-secondary-teal-100: #ccf2ef;
  --ctt-core-color-secondary-teal-200: #99e4e1;
  --ctt-core-color-secondary-teal-300: #66d8d1;
  --ctt-core-color-secondary-teal-400: #33cac3;
  --ctt-core-color-secondary-teal-500: #00beb4;
  --ctt-core-color-secondary-teal-600: #009890;
  --ctt-core-color-secondary-teal-700: #00726c;
  --ctt-core-color-secondary-teal-800: #004c48;
  --ctt-core-color-secondary-teal-900: #002624;

  /* ========================================================================
     COLORS - SECONDARY - GREEN
     ======================================================================== */
  --ctt-core-color-secondary-green-50: #f7faee;
  --ctt-core-color-secondary-green-100: #eff6da;
  --ctt-core-color-secondary-green-200: #e1edb5;
  --ctt-core-color-secondary-green-300: #d1e490;
  --ctt-core-color-secondary-green-400: #c3db6b;
  --ctt-core-color-secondary-green-500: #b4d246;
  --ctt-core-color-secondary-green-600: #90a838;
  --ctt-core-color-secondary-green-700: #6c7e2a;
  --ctt-core-color-secondary-green-800: #48541c;
  --ctt-core-color-secondary-green-900: #242a0e;

  /* ========================================================================
     COLORS - SECONDARY - LIME
     ======================================================================== */
  --ctt-core-color-secondary-lime-50: #fffef0;
  --ctt-core-color-secondary-lime-100: #fffbcc;
  --ctt-core-color-secondary-lime-200: #fff699;
  --ctt-core-color-secondary-lime-300: #fff266;
  --ctt-core-color-secondary-lime-400: #ffef33;
  --ctt-core-color-secondary-lime-500: #ffeb00;
  --ctt-core-color-secondary-lime-600: #ccbc00;
  --ctt-core-color-secondary-lime-700: #998d00;
  --ctt-core-color-secondary-lime-800: #665e00;
  --ctt-core-color-secondary-lime-900: #332f00;

  /* ========================================================================
     COLORS - SEMANTIC - SUCCESS
     ======================================================================== */
  --ctt-core-color-semantic-success-50: #e9f3ea;
  --ctt-core-color-semantic-success-100: #d1e6d0;
  --ctt-core-color-semantic-success-200: #a6d6ae;
  --ctt-core-color-semantic-success-300: #7cc68b;
  --ctt-core-color-semantic-success-400: #52b768;
  --ctt-core-color-semantic-success-500: #28a745;
  --ctt-core-color-semantic-success-600: #208537;
  --ctt-core-color-semantic-success-700: #186429;
  --ctt-core-color-semantic-success-800: #10421b;
  --ctt-core-color-semantic-success-900: #08210d;

  /* ========================================================================
     COLORS - SEMANTIC - WARNING
     ======================================================================== */
  --ctt-core-color-semantic-warning-50: #fff7e6;
  --ctt-core-color-semantic-warning-100: #ffeacc;
  --ctt-core-color-semantic-warning-200: #ffd699;
  --ctt-core-color-semantic-warning-300: #ffc266;
  --ctt-core-color-semantic-warning-400: #ffad33;
  --ctt-core-color-semantic-warning-500: #ff9800;
  --ctt-core-color-semantic-warning-600: #cc7900;
  --ctt-core-color-semantic-warning-700: #995b00;
  --ctt-core-color-semantic-warning-800: #663c00;
  --ctt-core-color-semantic-warning-900: #331e00;

  /* ========================================================================
     COLORS - SEMANTIC - NEGATIVE
     ======================================================================== */
  --ctt-core-color-semantic-negative-50: #fcebea;
  --ctt-core-color-semantic-negative-100: #f9d7d6;
  --ctt-core-color-semantic-negative-200: #f4afae;
  --ctt-core-color-semantic-negative-300: #ef8885;
  --ctt-core-color-semantic-negative-400: #ea605d;
  --ctt-core-color-semantic-negative-500: #e53935;
  --ctt-core-color-negative-main: var(--ctt-core-color-semantic-negative-500);
  --ctt-core-color-semantic-negative-600: #b72d2a;
  --ctt-core-color-semantic-negative-700: #89221f;
  --ctt-core-color-semantic-negative-800: #5b1615;
  --ctt-core-color-semantic-negative-900: #2d0b0a;

  /* ========================================================================
     COLORS - SEMANTIC - INFORMATIVE
     ======================================================================== */
  --ctt-core-color-semantic-informative-50: #e8f4fd;
  --ctt-core-color-semantic-informative-100: #d2eafc;
  --ctt-core-color-semantic-informative-200: #a6d5fa;
  --ctt-core-color-semantic-informative-300: #79c0f7;
  --ctt-core-color-semantic-informative-400: #4dabf5;
  --ctt-core-color-semantic-informative-500: #2196f3;
  --ctt-core-color-semantic-informative-600: #1a78c2;
  --ctt-core-color-semantic-informative-700: #135a91;
  --ctt-core-color-semantic-informative-800: #0d3c61;
  --ctt-core-color-semantic-informative-900: #061e30;

  /* ========================================================================
     TYPOGRAPHY - FAMILY
     ======================================================================== */
  --ctt-core-font-family-sans: 'ActoCTT', sans-serif;

  /* ========================================================================
     TYPOGRAPHY - SIZE
     ======================================================================== */
  --ctt-core-font-size-xs: 12px;
  --ctt-core-font-size-sm: 14px;
  --ctt-core-font-size-base: 16px;
  --ctt-core-font-size-md: var(--ctt-core-font-size-base);
  --ctt-core-font-size-lg: 18px;
  --ctt-core-font-size-xl: 20px;
  --ctt-core-font-size-2xl: 24px;
  --ctt-core-font-size-28: 28px;
  --ctt-core-font-size-3xl: 32px;
  --ctt-core-font-size-4xl: 40px;
  --ctt-core-font-size-5xl: 48px;
  --ctt-core-font-size-6xl: 60px;
  --ctt-core-font-size-7xl: 72px;

  /* ========================================================================
     TYPOGRAPHY - WEIGHT
     ======================================================================== */
  --ctt-core-font-weight-thin: 250;
  --ctt-core-font-weight-light: 300;
  --ctt-core-font-weight-book: 400;
  --ctt-core-font-weight-medium: 500;
  --ctt-core-font-weight-semi-bold: 600;
  --ctt-core-font-weight-bold: 700;
  --ctt-core-font-weight-black: 900;

  /* ========================================================================
     TYPOGRAPHY - LETTER SPACING
     ======================================================================== */
  --ctt-core-letter-spacing-tight: -1px;
  --ctt-core-letter-spacing-normal: 0px;
  --ctt-core-letter-spacing-wide: 1px;

  /* ========================================================================
     TYPOGRAPHY - LINE HEIGHT - BODY
     ======================================================================== */
  --ctt-core-line-height-body-sm: 20px;
  --ctt-core-line-height-body-xs: 16px;
  --ctt-core-line-height-body-md: 24px;
  --ctt-core-line-height-body-lg: 28px;

  /* ========================================================================
     TYPOGRAPHY - LINE HEIGHT - HEADING
     ======================================================================== */
  --ctt-core-line-height-heading-xs: 28px;
  --ctt-core-line-height-heading-sm: 32px;
  --ctt-core-line-height-heading-md: 36px;
  --ctt-core-line-height-heading-lg: 40px;
  --ctt-core-line-height-heading-xl: 48px;
  --ctt-core-line-height-heading-2xl: 56px;
  --ctt-core-line-height-heading-3xl: 68px;
  --ctt-core-line-height-heading-4xl: 80px;

  /* ========================================================================
     TYPOGRAPHY - LINE HEIGHT - LABEL
     ======================================================================== */
  --ctt-core-line-height-label-sm: 18px;
  --ctt-core-line-height-label-md: 20px;

  /* ========================================================================
     SPACING - SCALE
     ======================================================================== */
  --ctt-core-space-0: 0px;
  --ctt-core-space-1: 4px;
  --ctt-core-space-2: 8px;
  --ctt-core-space-3: 12px;
  --ctt-core-space-4: 16px;
  --ctt-core-space-5: 20px;
  --ctt-core-space-6: 24px;
  --ctt-core-space-7: 28px;
  --ctt-core-space-8: 32px;
  --ctt-core-space-9: 36px;
  --ctt-core-space-10: 40px;
  --ctt-core-space-12: 48px;
  --ctt-core-space-14: 56px;
  --ctt-core-space-16: 64px;
  --ctt-core-space-18: 72px;
  --ctt-core-space-20: 80px;
  --ctt-core-space-24: 96px;
  --ctt-core-space-28: 112px;
  --ctt-core-space-32: 128px;
  --ctt-core-space-px: 1px;

  /* ========================================================================
     SIZE - ICON
     ======================================================================== */
  --ctt-core-size-icon-xs: 12px;
  --ctt-core-size-icon-s: 14px;
  --ctt-core-size-icon-sm: var(--ctt-core-size-icon-s);
  --ctt-core-size-icon-m: 16px;
  --ctt-core-size-icon-md: var(--ctt-core-size-icon-m);
  --ctt-core-size-icon-l: 18px;
  --ctt-core-size-icon-lg: var(--ctt-core-size-icon-l);
  --ctt-core-size-icon-xl: 24px;
  --ctt-core-size-icon-2xl: 32px;
  --ctt-core-size-icon-3xl: 48px;

  /* ========================================================================
     SIZE - CONTROL
     ======================================================================== */
  --ctt-core-size-control-xs: 16px;
  --ctt-core-size-control-s: 24px;
  --ctt-core-size-control-m: 32px;
  --ctt-core-size-control-l: 40px;
  --ctt-core-size-control-xl: 48px;
  --ctt-core-size-control-2xl: 64px;

  /* ========================================================================
     SIZE - HIT AREA
     ======================================================================== */
  --ctt-core-size-hit-area-min: 44px;

  /* ========================================================================
     RADIUS
     ======================================================================== */
  --ctt-core-radius-none: 0px;
  --ctt-core-radius-2xs: 2px;
  --ctt-core-radius-xs: 4px;
  --ctt-core-radius-sm: 8px;
  --ctt-core-radius-md: 12px;
  --ctt-core-radius-lg: 16px;
  --ctt-core-radius-xl: 24px;
  --ctt-core-radius-2xl: 32px;
  --ctt-core-radius-pill: 999px;

  /* ========================================================================
     ELEVATION - SHADOWS
     ======================================================================== */
  --ctt-core-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --ctt-core-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.12);
  --ctt-core-shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --ctt-core-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ctt-core-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ctt-core-shadow-table: 0px 8px 24px rgba(24, 39, 75, 0.04);

  /* ========================================================================
     MOTION - DURATION & EASING
     ======================================================================== */
  --ctt-core-motion-duration-fast: 100ms;
  --ctt-core-motion-duration-normal: 150ms;
  --ctt-core-motion-duration-slow: 200ms;
  --ctt-core-motion-duration-deliberate: 300ms;

  --ctt-core-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ctt-core-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --ctt-core-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --ctt-core-motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================================================
     ELEVATION - Z-INDEX / STACKING LAYERS
     ======================================================================== */
  --ctt-core-z-index-deep: -1;
  --ctt-core-z-index-base: 0;
  --ctt-core-z-index-dropdown: 1000;
  --ctt-core-z-index-sticky: 1100;
  --ctt-core-z-index-overlay: 1200;
  --ctt-core-z-index-modal: 1300;
  --ctt-core-z-index-popover: 1400;
  --ctt-core-z-index-toast: 1500;
  --ctt-core-z-index-tooltip: 1600;

  /* ========================================================================
     BORDER WIDTH
     ======================================================================== */
  --ctt-core-border-width-none: 0px;
  --ctt-core-border-width-hairline: 1px;
  --ctt-core-border-width-thin: 2px;
  --ctt-core-border-width-thick: 3px;

  /* ========================================================================
     GRID - BREAKPOINTS
     ======================================================================== */
  /* Grid breakpoints are min-width entry points (next pixel after semantic max-width tiers). */
  --ctt-core-grid-breakpoint-xs: 375px;
  --ctt-core-grid-breakpoint-sm: 481px;
  --ctt-core-grid-breakpoint-md: 769px;
  --ctt-core-grid-breakpoint-lg: 1201px;
  --ctt-core-grid-breakpoint-xl: 1401px;
  
  /* ========================================================================
     SEMANTIC - BREAKPOINTS
     ======================================================================== */
  /* Semantic breakpoints are inclusive max-width boundaries used by component responsive behavior. */
  --ctt-breakpoint-mobile: 480px;
  --ctt-breakpoint-tablet: 768px;
  --ctt-breakpoint-desktop: 1024px;

  /* ========================================================================
     GRID - CONTAINER MAX
     ======================================================================== */
  --ctt-core-grid-container-max-sm: 600px;
  --ctt-core-grid-container-max-md: 864px;
  --ctt-core-grid-container-max-lg: 1140px;
  --ctt-core-grid-container-max-xl: 1320px;

  /* ========================================================================
     GRID - COLUMNS
     ======================================================================== */
  --ctt-core-grid-columns: 12;

  /* ========================================================================
     GRID - GUTTER
     ======================================================================== */
  --ctt-core-grid-gutter-sm: 12px;
  --ctt-core-grid-gutter-md: 16px;
  --ctt-core-grid-gutter-lg: 24px;
  --ctt-core-grid-gutter-xl: 32px;

  /* ========================================================================
     BASE TOKENS - SURFACE
     ======================================================================== */
  --ctt-base-surface-page: var(--ctt-core-color-basic-white);
  --ctt-base-surface-container: var(--ctt-core-color-basic-white);
  --ctt-base-surface-subtle: var(--ctt-core-color-neutral-50);
  --ctt-base-surface-muted: var(--ctt-core-color-neutral-100);
  --ctt-base-surface-elevated: var(--ctt-core-color-neutral-50);
  --ctt-base-surface-brand: var(--ctt-core-color-primary-500);
  --ctt-base-surface-brand-soft: var(--ctt-core-color-primary-50);
  --ctt-base-surface-success: var(--ctt-core-color-semantic-success-50);
  --ctt-base-surface-warning: var(--ctt-core-color-semantic-warning-50);
  --ctt-base-surface-error: var(--ctt-core-color-semantic-negative-50);
  --ctt-base-surface-info: var(--ctt-core-color-semantic-informative-50);
  --ctt-base-surface-highlight: var(--ctt-core-color-secondary-purple-50);
  --ctt-base-surface-disabled: var(--ctt-core-color-neutral-100);
  --ctt-base-surface-hover: var(--ctt-core-color-neutral-50);
  --ctt-base-surface-primary: var(--ctt-core-color-primary-500);
  --ctt-base-surface-secondary: var(--ctt-core-color-neutral-800);

  /* ========================================================================
     BASE TOKENS - TEXT
     ======================================================================== */
  --ctt-base-text-main: var(--ctt-core-color-neutral-800);
  --ctt-base-text-weak: var(--ctt-core-color-neutral-600);
  --ctt-base-text-strong: var(--ctt-core-color-neutral-900);
  --ctt-base-text-inverse: var(--ctt-core-color-neutral-50);
  --ctt-base-text-brand: var(--ctt-core-color-primary-500);
  --ctt-base-text-brand-on-soft: var(--ctt-core-color-primary-900);
  --ctt-base-text-negative: var(--ctt-core-color-semantic-negative-600);
  --ctt-base-text-error: var(--ctt-base-text-negative);
  --ctt-error-text: var(--ctt-base-text-error);
  --ctt-error-text-font-size: var(--ctt-core-font-size-sm);
  --ctt-error-text-font-weight: var(--ctt-core-font-weight-book);
  --ctt-base-text-disabled: var(--ctt-core-color-neutral-400);
  --ctt-base-text-placeholder: var(--ctt-core-color-neutral-400);
  --ctt-base-text-primary: var(--ctt-core-color-primary-500);
  --ctt-base-text-tertiary: var(--ctt-core-color-neutral-600);

  /* ========================================================================
     BASE TOKENS - ON (Foreground on surfaces)
     ======================================================================== */
  --ctt-base-on-primary-fg: var(--ctt-base-text-inverse);
  --ctt-base-on-secondary-fg: var(--ctt-base-text-inverse);
  --ctt-base-on-surface-fg: var(--ctt-base-text-main);
  --ctt-base-on-muted-fg: var(--ctt-core-color-neutral-600);
  --ctt-base-on-success-fg: var(--ctt-core-color-semantic-success-700);
  --ctt-base-on-warning-fg: var(--ctt-core-color-semantic-warning-700);
  --ctt-base-on-negative-fg: var(--ctt-base-text-negative);
  --ctt-base-on-info-fg: var(--ctt-core-color-semantic-informative-700);
  --ctt-base-on-highlight-fg: var(--ctt-core-color-secondary-purple-600);
  --ctt-base-on-neutral-fg: var(--ctt-core-color-neutral-700);
  --ctt-base-on-error-fg: var(--ctt-core-color-semantic-negative-600);
  --ctt-base-state-error-fg: var(--ctt-base-text-negative);

  /* ========================================================================
     BASE TOKENS - BORDER
     ======================================================================== */
  --ctt-base-border-subtle: var(--ctt-core-color-neutral-300);
  --ctt-base-border-default: var(--ctt-core-color-neutral-500);
  --ctt-base-border-strong: var(--ctt-core-color-neutral-700);
  --ctt-base-border-focus: var(--ctt-core-color-neutral-800);
  --ctt-base-border-negative: var(--ctt-core-color-semantic-negative-600);
  --ctt-base-border-error: var(--ctt-base-border-negative);
  --ctt-base-border-primary: var(--ctt-core-color-primary-500);
  --ctt-base-border-primary-soft: var(--ctt-core-color-primary-200);
  --ctt-base-border-warning: var(--ctt-core-color-semantic-warning-700);
  --ctt-base-border-success: var(--ctt-core-color-semantic-success-500);
  --ctt-base-border-highlight: var(--ctt-core-color-secondary-purple-500);
  --ctt-base-border-hover: var(--ctt-core-color-neutral-600);
  --ctt-base-border-selected: var(--ctt-core-color-neutral-900);
  --ctt-base-border-disabled: var(--ctt-core-color-neutral-200);

  /* ========================================================================
     BASE TOKENS - INTERACTIVE - ACTION - PRIMARY
     ======================================================================== */
  --ctt-base-action-primary-bg-default: var(--ctt-base-surface-brand);
  --ctt-base-action-primary-bg-hover: var(--ctt-core-color-primary-600);
  --ctt-base-action-primary-bg-active: var(--ctt-core-color-primary-600);
  --ctt-base-action-primary-bg-disabled: var(--ctt-base-surface-muted);
  --ctt-base-action-primary-bg-selected: var(--ctt-core-color-primary-600);
  --ctt-base-action-primary-fg-default: var(--ctt-base-text-inverse);
  --ctt-base-action-primary-fg-disabled: var(--ctt-base-text-weak);
  --ctt-base-action-primary-fg-selected: var(--ctt-base-text-inverse);
  --ctt-base-action-primary-border-default: var(--ctt-base-border-primary);
  --ctt-base-action-primary-border-disabled: var(--ctt-base-border-subtle);
  --ctt-base-action-primary-border-selected: var(--ctt-core-color-primary-600);

  /* ========================================================================
     BASE TOKENS - INTERACTIVE - ACTION - SECONDARY
     ======================================================================== */
  --ctt-base-action-secondary-bg-default: var(--ctt-core-color-neutral-800);
  --ctt-base-action-secondary-bg-hover: var(--ctt-core-color-neutral-900);
  --ctt-base-action-secondary-bg-active: var(--ctt-core-color-neutral-900);
  --ctt-base-action-secondary-bg-disabled: var(--ctt-core-color-neutral-100);
  --ctt-base-action-secondary-bg-selected: var(--ctt-core-color-neutral-900);
  --ctt-base-action-secondary-fg-default: var(--ctt-core-color-neutral-50);
  --ctt-base-action-secondary-fg-disabled: var(--ctt-base-on-muted-fg);
  --ctt-base-action-secondary-fg-color: var(--ctt-core-color-neutral-50);
  --ctt-base-action-secondary-border-default: var(--ctt-core-color-neutral-800);
  --ctt-base-action-secondary-border-disabled: var(--ctt-base-border-subtle);
  --ctt-base-action-secondary-border-selected: var(--ctt-core-color-neutral-900);

  /* ========================================================================
     BASE TOKENS - INTERACTIVE - ACTION - TERTIARY
     ======================================================================== */
  --ctt-base-action-tertiary-bg-default: var(--ctt-core-color-basic-white);
  --ctt-base-action-tertiary-bg-hover: var(--ctt-core-color-primary-600);
  --ctt-base-action-tertiary-bg-selected: var(--ctt-core-color-primary-600);
  --ctt-base-action-tertiary-bg-disabled: var(--ctt-core-color-neutral-100);
  --ctt-base-action-tertiary-fg-default: var(--ctt-core-color-primary-500);
  --ctt-base-action-tertiary-fg-hover: var(--ctt-core-color-neutral-50);
  --ctt-base-action-tertiary-fg-selected: var(--ctt-core-color-neutral-50);
  --ctt-base-action-tertiary-fg-disabled: var(--ctt-base-on-muted-fg);
  --ctt-base-action-tertiary-border-default: var(--ctt-core-color-primary-500);
  --ctt-base-action-tertiary-border-hover: var(--ctt-core-color-primary-600);
  --ctt-base-action-tertiary-border-selected: var(--ctt-core-color-primary-600);
  --ctt-base-action-tertiary-border-disabled: var(--ctt-base-border-subtle);
  --ctt-base-action-default: var(--ctt-core-color-primary-500);
  --ctt-base-action-negative: var(--ctt-core-color-semantic-negative-500);

  /* ========================================================================
     BASE TOKENS - INTERACTIVE - ACTION - PLAIN
     ======================================================================== */
  --ctt-base-action-plain-bg-default: var(--ctt-core-color-basic-white);
  --ctt-base-action-plain-bg-disabled: var(--ctt-core-color-neutral-100);
  --ctt-base-action-plain-bg-selected: var(--ctt-core-color-neutral-50);
  --ctt-base-action-plain-fg-default: var(--ctt-core-color-primary-500);
  --ctt-base-action-plain-fg-hover: var(--ctt-core-color-primary-600);
  --ctt-base-action-plain-fg-selected: var(--ctt-core-color-primary-600);

  /* ========================================================================
     BASE TOKENS - INPUT
     ======================================================================== */
  --ctt-base-input-bg-default: var(--ctt-core-color-basic-white);
  --ctt-base-input-bg-disabled: var(--ctt-core-color-neutral-100);
  --ctt-base-input-bg-readonly: var(--ctt-core-color-neutral-100);
  --ctt-base-input-fg-default: var(--ctt-core-color-neutral-800);
  --ctt-base-input-fg-placeholder: var(--ctt-base-text-placeholder);
  --ctt-base-input-fg-disabled: var(--ctt-base-on-muted-fg);
  --ctt-base-input-border-default: var(--ctt-base-border-default);
  --ctt-base-input-border-hover: var(--ctt-core-color-neutral-800);
  --ctt-base-input-border-error: var(--ctt-base-border-negative);
  --ctt-base-input-border-disabled: var(--ctt-base-border-subtle);
  --ctt-base-input-border-active: var(--ctt-core-color-neutral-800);
  --ctt-base-input-border-selected: var(--ctt-core-color-neutral-700);

  /* ========================================================================
     BASE TOKENS - STATE - SUCCESS
     ======================================================================== */
  --ctt-base-state-success-bg: var(--ctt-base-surface-success);
  --ctt-base-state-success-fg: var(--ctt-base-on-success-fg);
  --ctt-base-state-success-border: var(--ctt-base-border-success);

  /* ========================================================================
     BASE TOKENS - STATE - WARNING
     ======================================================================== */
  --ctt-base-state-warning-bg: var(--ctt-base-surface-warning);
  --ctt-base-state-warning-fg: var(--ctt-base-on-warning-fg);
  --ctt-base-state-warning-border: var(--ctt-base-border-warning);

  /* ========================================================================
     BASE TOKENS - STATE - ERROR
     ======================================================================== */
  --ctt-base-state-negative-bg: var(--ctt-base-surface-error);
  --ctt-base-state-negative-fg: var(--ctt-base-on-error-fg);
  --ctt-base-state-negative-border: var(--ctt-base-border-error);

  /* ========================================================================
     BASE TOKENS - STATE - INFO
     ======================================================================== */
  --ctt-base-state-info-bg: var(--ctt-base-surface-info);
  --ctt-base-state-info-fg: var(--ctt-base-on-info-fg);
  --ctt-base-state-info-border: var(--ctt-base-border-focus);

  /* ========================================================================
     BASE TOKENS - STATE - HIGHLIGHT
     ======================================================================== */
  --ctt-base-state-highlight-bg: var(--ctt-base-surface-highlight);
  --ctt-base-state-highlight-fg: var(--ctt-base-on-highlight-fg);
  --ctt-base-state-highlight-border: var(--ctt-base-border-highlight);

  /* ========================================================================
     BASE TOKENS - FONT
     ======================================================================== */
  --ctt-base-font-body: var(--ctt-core-font-family-sans);
  --ctt-base-font-title: var(--ctt-core-font-family-sans);

  /* ========================================================================
     BASE TOKENS - FEEDBACK COLORS
     ======================================================================== */
  --ctt-base-color-feedback-success-bg-main: var(--ctt-core-color-semantic-success-500);
  --ctt-base-color-feedback-success-bg-light: var(--ctt-core-color-semantic-success-50);
  --ctt-base-color-feedback-warning-bg-main: var(--ctt-core-color-semantic-warning-500);
  --ctt-base-color-feedback-warning-bg-light: var(--ctt-core-color-semantic-warning-50);
  --ctt-base-color-feedback-negative-bg-main: var(--ctt-core-color-semantic-negative-500);
  --ctt-base-color-feedback-negative-bg-light: var(--ctt-core-color-semantic-negative-50);
  --ctt-base-color-feedback-info-bg-main: var(--ctt-core-color-semantic-informative-500);
  --ctt-base-color-feedback-info-bg-light: var(--ctt-core-color-semantic-informative-50);
  --ctt-base-color-feedback-highlight-bg-main: var(--ctt-core-color-secondary-purple-500);
  --ctt-base-color-feedback-highlight-bg-light: var(--ctt-core-color-secondary-purple-50);

  /* ========================================================================
     BASE TOKENS - STATE - NEUTRAL
     ======================================================================== */
  --ctt-base-state-neutral-bg: var(--ctt-core-color-neutral-50);
  --ctt-base-state-neutral-fg: var(--ctt-base-on-neutral-fg);
  --ctt-base-state-neutral-border: var(--ctt-core-color-neutral-600);

  /* ========================================================================
     BASE TOKENS - LINK
     ======================================================================== */
  --ctt-base-link-fg-default: var(--ctt-core-color-primary-500);
  --ctt-base-link-fg-hover: var(--ctt-core-color-primary-600);
  --ctt-base-link-fg-disabled: var(--ctt-core-color-neutral-600);

  /* ========================================================================
     BASE TOKENS - MOTION
     ======================================================================== */
  --ctt-base-motion-duration-instant: var(--ctt-core-motion-duration-fast);
  --ctt-base-motion-duration-control: var(--ctt-core-motion-duration-normal);
  --ctt-base-motion-duration-transition: var(--ctt-core-motion-duration-slow);
  --ctt-base-motion-duration-panel: var(--ctt-core-motion-duration-deliberate);

  --ctt-base-motion-easing-default: var(--ctt-core-motion-easing-default);
  --ctt-base-motion-easing-in: var(--ctt-core-motion-easing-in);
  --ctt-base-motion-easing-out: var(--ctt-core-motion-easing-out);
  --ctt-base-motion-easing-in-out: var(--ctt-core-motion-easing-in-out);

  /* ========================================================================
     BASE TOKENS - Z-INDEX / STACKING LAYERS
     ======================================================================== */
  --ctt-base-z-index-deep: var(--ctt-core-z-index-deep);
  --ctt-base-z-index-base: var(--ctt-core-z-index-base);
  --ctt-base-z-index-dropdown: var(--ctt-core-z-index-dropdown);
  --ctt-base-z-index-sticky: var(--ctt-core-z-index-sticky);
  --ctt-base-z-index-overlay: var(--ctt-core-z-index-overlay);
  --ctt-base-z-index-modal: var(--ctt-core-z-index-modal);
  --ctt-base-z-index-popover: var(--ctt-core-z-index-popover);
  --ctt-base-z-index-toast: var(--ctt-core-z-index-toast);
  --ctt-base-z-index-tooltip: var(--ctt-core-z-index-tooltip);

  /* ========================================================================
     BASE TOKENS - LAYOUT - GRID
     ======================================================================== */
  --ctt-base-layout-grid: 12;

  /* ========================================================================
     BASE TOKENS - LAYOUT - CONTAINER PADDING
     ======================================================================== */
  --ctt-base-layout-container-padding-xxs: var(--ctt-core-space-2);
  --ctt-base-layout-container-padding-xs: var(--ctt-core-space-3);
  --ctt-base-layout-container-padding-sm: var(--ctt-core-space-4);
  --ctt-base-layout-container-padding-md: var(--ctt-core-space-5);
  --ctt-base-layout-container-padding-lg: var(--ctt-core-space-6);
  --ctt-base-layout-container-padding-xl: var(--ctt-core-space-8);
  --ctt-base-layout-container-padding-none: var(--ctt-core-space-0);

  /* ========================================================================
     BASE TOKENS - LAYOUT - SECTION GAP
     ======================================================================== */
  --ctt-base-layout-section-gap-sm: var(--ctt-core-space-4);
  --ctt-base-layout-section-gap-md: var(--ctt-core-space-6);
  --ctt-base-layout-section-gap-lg: var(--ctt-core-space-8);
  --ctt-base-layout-section-gap-xl: var(--ctt-core-space-12);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - BODY
     ======================================================================== */
  --ctt-base-text-style-body-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-body-sm-size: var(--ctt-core-font-size-sm);
  --ctt-base-text-style-body-sm-line-height: var(--ctt-core-line-height-body-sm);
  --ctt-base-text-style-body-sm-weight: var(--ctt-core-font-weight-book);

  --ctt-base-text-style-body-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-body-md-size: var(--ctt-core-font-size-md);
  --ctt-base-text-style-body-md-line-height: var(--ctt-core-line-height-body-md);
  --ctt-base-text-style-body-md-weight: var(--ctt-core-font-weight-book);

  --ctt-base-text-style-body-lg-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-body-lg-size: var(--ctt-core-font-size-lg);
  --ctt-base-text-style-body-lg-line-height: var(--ctt-core-line-height-body-lg);
  --ctt-base-text-style-body-lg-weight: var(--ctt-core-font-weight-book);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - LABEL
     ======================================================================== */
  --ctt-base-text-style-label-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-label-sm-size: var(--ctt-core-font-size-sm);
  --ctt-base-text-style-label-sm-line-height: var(--ctt-core-line-height-label-sm);
  --ctt-base-text-style-label-sm-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-label-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-label-md-size: var(--ctt-core-font-size-md);
  --ctt-base-text-style-label-md-line-height: var(--ctt-core-line-height-label-md);
  --ctt-base-text-style-label-md-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-label-lg-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-label-lg-size: var(--ctt-core-font-size-lg);
  --ctt-base-text-style-label-lg-line-height: var(--ctt-core-line-height-label-md);
  --ctt-base-text-style-label-lg-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - HEADING - TITLE - DESKTOP
     ======================================================================== */

  --ctt-base-text-style-heading-title-desktop-xs-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-desktop-xs-size: var(--ctt-core-font-size-xl);
  --ctt-base-text-style-heading-title-desktop-xs-line-height: var(--ctt-core-line-height-heading-xs);
  --ctt-base-text-style-heading-title-desktop-xs-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-desktop-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-desktop-sm-size: var(--ctt-core-font-size-2xl);
  --ctt-base-text-style-heading-title-desktop-sm-line-height: var(--ctt-core-line-height-heading-sm);
  --ctt-base-text-style-heading-title-desktop-sm-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-desktop-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-desktop-md-size: var(--ctt-core-font-size-28);
  --ctt-base-text-style-heading-title-desktop-md-line-height: var(--ctt-core-line-height-heading-md);
  --ctt-base-text-style-heading-title-desktop-md-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-desktop-lg-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-desktop-lg-size: var(--ctt-core-font-size-3xl);
  --ctt-base-text-style-heading-title-desktop-lg-line-height: var(--ctt-core-line-height-heading-lg);
  --ctt-base-text-style-heading-title-desktop-lg-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-desktop-xl-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-desktop-xl-size: var(--ctt-core-font-size-4xl);
  --ctt-base-text-style-heading-title-desktop-xl-line-height: var(--ctt-core-line-height-heading-xl);
  --ctt-base-text-style-heading-title-desktop-xl-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - HEADING - TITLE - TABLET
     ======================================================================== */
  --ctt-base-text-style-heading-title-tablet-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-tablet-sm-size: var(--ctt-core-font-size-xl);
  --ctt-base-text-style-heading-title-tablet-sm-line-height: var(--ctt-core-line-height-heading-xs);
  --ctt-base-text-style-heading-title-tablet-sm-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-tablet-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-tablet-md-size: var(--ctt-core-font-size-2xl);
  --ctt-base-text-style-heading-title-tablet-md-line-height: var(--ctt-core-line-height-heading-sm);
  --ctt-base-text-style-heading-title-tablet-md-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-tablet-lg-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-tablet-lg-size: var(--ctt-core-font-size-3xl);
  --ctt-base-text-style-heading-title-tablet-lg-line-height: var(--ctt-core-line-height-heading-lg);
  --ctt-base-text-style-heading-title-tablet-lg-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - HEADING - TITLE - MOBILE
     ======================================================================== */
  --ctt-base-text-style-heading-title-mobile-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-mobile-sm-size: var(--ctt-core-font-size-xl);
  --ctt-base-text-style-heading-title-mobile-sm-line-height: var(--ctt-core-line-height-heading-xs);
  --ctt-base-text-style-heading-title-mobile-sm-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-title-mobile-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-title-mobile-md-size: var(--ctt-core-font-size-3xl);
  --ctt-base-text-style-heading-title-mobile-md-line-height: var(--ctt-core-line-height-heading-lg);
  --ctt-base-text-style-heading-title-mobile-md-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - HEADING - DISPLAY - DESKTOP
     ======================================================================== */
  --ctt-base-text-style-heading-display-desktop-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-desktop-sm-size: var(--ctt-core-font-size-3xl);
  --ctt-base-text-style-heading-display-desktop-sm-line-height: var(--ctt-core-line-height-heading-lg);
  --ctt-base-text-style-heading-display-desktop-sm-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-display-desktop-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-desktop-md-size: var(--ctt-core-font-size-5xl);
  --ctt-base-text-style-heading-display-desktop-md-line-height: var(--ctt-core-line-height-heading-2xl);
  --ctt-base-text-style-heading-display-desktop-md-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-display-desktop-lg-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-desktop-lg-size: var(--ctt-core-font-size-6xl);
  --ctt-base-text-style-heading-display-desktop-lg-line-height: var(--ctt-core-line-height-heading-3xl);
  --ctt-base-text-style-heading-display-desktop-lg-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-display-desktop-xl-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-desktop-xl-size: var(--ctt-core-font-size-7xl);
  --ctt-base-text-style-heading-display-desktop-xl-line-height: var(--ctt-core-line-height-heading-4xl);
  --ctt-base-text-style-heading-display-desktop-xl-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - HEADING - DISPLAY - TABLET
     ======================================================================== */
  --ctt-base-text-style-heading-display-tablet-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-tablet-sm-size: var(--ctt-core-font-size-3xl);
  --ctt-base-text-style-heading-display-tablet-sm-line-height: var(--ctt-core-line-height-heading-lg);
  --ctt-base-text-style-heading-display-tablet-sm-weight: var(--ctt-core-font-weight-medium);

  --ctt-base-text-style-heading-display-tablet-md-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-tablet-md-size: var(--ctt-core-font-size-4xl);
  --ctt-base-text-style-heading-display-tablet-md-line-height: var(--ctt-core-line-height-heading-xl);
  --ctt-base-text-style-heading-display-tablet-md-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - TEXT STYLES - HEADING - DISPLAY - MOBILE
     ======================================================================== */
  --ctt-base-text-style-heading-display-mobile-sm-family: 'ActoCTT', sans-serif;
  --ctt-base-text-style-heading-display-mobile-sm-size: var(--ctt-core-font-size-3xl);
  --ctt-base-text-style-heading-display-mobile-sm-line-height: var(--ctt-core-line-height-heading-lg);
  --ctt-base-text-style-heading-display-mobile-sm-weight: var(--ctt-core-font-weight-medium);

  /* ========================================================================
     BASE TOKENS - SHAPE - RADIUS
     ======================================================================== */
  --ctt-base-shape-radius-none: var(--ctt-core-radius-none);
  --ctt-base-shape-radius-xs: var(--ctt-core-radius-xs);
  --ctt-base-shape-radius-sm: var(--ctt-core-radius-sm);
  --ctt-base-shape-radius-md: var(--ctt-core-radius-md);
  --ctt-base-shape-radius-lg: var(--ctt-core-radius-lg);
  --ctt-base-shape-radius-xl: var(--ctt-core-radius-xl);
  --ctt-base-shape-radius-2xl: var(--ctt-core-radius-2xl);
  --ctt-base-shape-radius-pill: var(--ctt-core-radius-pill);

  /* ========================================================================
     BASE TOKENS - SHAPE - BORDER WIDTH
     ======================================================================== */
  --ctt-base-shape-border-width-hairline: var(--ctt-core-border-width-hairline);
  --ctt-base-shape-border-width-thin: var(--ctt-core-border-width-thin);
  --ctt-base-shape-border-width-thick: var(--ctt-core-border-width-thick);

  /* ========================================================================
     COMPONENT TOKENS - BUTTON
     ======================================================================== */

  /* ========================================================================
     BUTTON - SIZE VARIANTS
     ======================================================================== */

  /* Button Size - XS (Extra Small) */
  --ctt-button-size-xs-height: 24px;
  --ctt-button-size-xs-padding-x: var(--ctt-base-layout-container-padding-xxs);
  --ctt-button-size-xs-padding-y: var(--ctt-base-layout-container-padding-xxs);
  --ctt-button-size-xs-icon-size: 16px;
  --ctt-button-size-xs-icon-gap: 8px;

  /* Button Size - SM (Small) */
  --ctt-button-size-sm-height: 32px;
  --ctt-button-size-sm-padding-x: var(--ctt-base-layout-container-padding-sm);
  --ctt-button-size-sm-padding-y: 0px;
  --ctt-button-size-sm-icon-size: 16px;
  --ctt-button-size-sm-icon-gap: 8px;

  /* Button Size - MD (Medium) */
  --ctt-button-size-md-height: 48px;
  --ctt-button-size-md-padding-x: var(--ctt-base-layout-container-padding-sm);
  --ctt-button-size-md-padding-y: 0px;
  --ctt-button-size-md-icon-size: 18px;
  --ctt-button-size-md-icon-gap: 8px;

  /* Button Size - LG (Large) */
  --ctt-button-size-lg-height: 64px;
  --ctt-button-size-lg-padding-x: var(--ctt-base-layout-container-padding-lg);
  --ctt-button-size-lg-padding-y: 0px;
  --ctt-button-size-lg-icon-size: 18px;
  --ctt-button-size-lg-icon-gap: 12px;

  /* ========================================================================
     BUTTON - RADIUS VARIANTS
     ======================================================================== */
  --ctt-button-radius-none: var(--ctt-base-shape-radius-none);
  --ctt-button-radius-xs: var(--ctt-base-shape-radius-xs);
  --ctt-button-radius-sm: var(--ctt-base-shape-radius-sm);
  --ctt-button-radius-pill: var(--ctt-base-shape-radius-pill);

  /* ========================================================================
     BUTTON - VARIANT - PRIMARY
     ======================================================================== */

  /* Primary - Background */
  --ctt-button-primary-bg-default: var(--ctt-base-action-primary-bg-default);
  --ctt-button-primary-bg-hover: var(--ctt-base-action-primary-bg-hover);
  --ctt-button-primary-bg-disabled: var(--ctt-base-action-primary-bg-disabled);

  /* Primary - Foreground */
  --ctt-button-primary-fg-default: var(--ctt-core-color-basic-white);
  --ctt-button-primary-fg-hover: var(--ctt-core-color-basic-white);
  --ctt-button-primary-fg-disabled: var(--ctt-base-action-primary-fg-disabled);

  /* Primary - Border */
  --ctt-button-primary-border-default: var(--ctt-base-action-primary-border-default);
  --ctt-button-primary-border-hover: #ba1d31;
  --ctt-button-primary-border-disabled: #c9c9c9;

  /* ========================================================================
     BUTTON - VARIANT - SECONDARY
     ======================================================================== */

  /* Secondary - Background */
  --ctt-button-secondary-bg-default: #333333;
  --ctt-button-secondary-bg-hover: #1a1a1a;
  --ctt-button-secondary-bg-disabled: var(--ctt-core-color-neutral-100);

  /* Secondary - Foreground */
  --ctt-button-secondary-fg-default: #fafafa;
  --ctt-button-secondary-fg-hover: #fafafa;
  --ctt-button-secondary-fg-disabled: #666666;

  /* Secondary - Border */
  --ctt-button-secondary-border-default: #333333;
  --ctt-button-secondary-border-hover: #1a1a1a;
  --ctt-button-secondary-border-disabled: var(--ctt-base-border-subtle);

  /* ========================================================================
     BUTTON - VARIANT - TERTIARY
     ======================================================================== */

  /* Tertiary - Background */
  --ctt-button-tertiary-bg-default: #ffffff;
  --ctt-button-tertiary-bg-hover: #ba1d31;
  --ctt-button-tertiary-bg-disabled: var(--ctt-core-color-neutral-100);

  /* Tertiary - Foreground */
  --ctt-button-tertiary-fg-default: #df0024;
  --ctt-button-tertiary-fg-hover: #fafafa;
  --ctt-button-tertiary-fg-disabled: #666666;

  /* Tertiary - Border */
  --ctt-button-tertiary-border-default: #df0024;
  --ctt-button-tertiary-border-hover: #ba1d31;
  --ctt-button-tertiary-border-disabled: var(--ctt-base-border-subtle);

  /* ========================================================================
     BUTTON - VARIANT - BASIC
     ======================================================================== */

  /* Basic - Background */
  --ctt-button-basic-bg-default: #ffffff;
  --ctt-button-basic-bg-hover: #1a1a1a;
  --ctt-button-basic-bg-disabled: var(--ctt-core-color-neutral-100);

  /* Basic - Foreground */
  --ctt-button-basic-fg-default: #333333;
  --ctt-button-basic-fg-hover: #fafafa;
  --ctt-button-basic-fg-disabled: #666666;

  /* Basic - Border */
  --ctt-button-basic-border-default: #333333;
  --ctt-button-basic-border-hover: #1a1a1a;
  --ctt-button-basic-border-disabled: var(--ctt-base-border-subtle);

  /* ========================================================================
     BUTTON - VARIANT - LOADING
     ======================================================================== */

  /* Loading - Background */
  --ctt-button-loading-bg-default: var(--ctt-core-color-neutral-100);

  /* Loading - Foreground */
  --ctt-button-loading-fg-default: #666666;

  /* Loading - Border */
  --ctt-button-loading-border-default: var(--ctt-base-border-subtle);

  /* ========================================================================
     COMPONENT TOKENS - BUTTON SWITCH
     ======================================================================== */

  /* ========================================================================
     BUTTON SWITCH - SIZE VARIANTS
     ======================================================================== */

  /* Button Switch Size - S (Small) */
  --ctt-button-switch-size-s-height: var(--ctt-core-size-control-m);
  --ctt-button-switch-size-s-padding: 2px;
  /* 4px */
  --ctt-button-switch-size-s-gap: var(--ctt-core-space-2);
  /* 8px */
  --ctt-button-switch-size-s-option-padding-x: var(--ctt-core-space-3);
  /* 12px */
  --ctt-button-switch-size-s-option-padding-y: var(--ctt-core-space-1);
  /* 8px */
  --ctt-button-switch-size-s-font-size: var(--ctt-core-font-size-sm);
  /* 12px */
  --ctt-button-switch-size-s-slider-offset-top: var(--ctt-core-space-1);
  /* 4px */
  --ctt-button-switch-size-s-slider-offset-bottom: var(--ctt-core-space-1);
  /* 4px */

  /* Button Switch Size - M (Medium) */
  --ctt-button-switch-size-m-height: var(--ctt-core-size-control-xl);
  --ctt-button-switch-size-m-padding: var(--ctt-core-space-1);
  /* 8px */
  --ctt-button-switch-size-m-gap: var(--ctt-core-space-2);
  /* 8px */
  --ctt-button-switch-size-m-option-padding-x: var(--ctt-core-space-4);
  /* 12px */
  --ctt-button-switch-size-m-option-padding-y: var(--ctt-core-space-1);
  /* 8px */
  --ctt-button-switch-size-m-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-button-switch-size-m-slider-offset-top: var(--ctt-core-space-2);
  /* 8px */
  --ctt-button-switch-size-m-slider-offset-bottom: var(--ctt-core-space-2);
  /* 8px */

  /* Button Switch Size - L (Large) */
  --ctt-button-switch-size-l-height: var(--ctt-core-size-control-2xl);
  /* 64px */
  --ctt-button-switch-size-l-padding: var(--ctt-core-space-2);
  /* 8px */
  --ctt-button-switch-size-l-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-button-switch-size-l-option-padding-x: var(--ctt-core-space-4);
  /* 12px */
  --ctt-button-switch-size-l-option-padding-y: var(--ctt-core-space-3);
  /* 12px */
  --ctt-button-switch-size-l-font-size: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-button-switch-size-l-slider-offset-top: var(--ctt-core-space-2);
  /* 8px */
  --ctt-button-switch-size-l-slider-offset-bottom: var(--ctt-core-space-2);
  /* 8px */

  /* ========================================================================
     BUTTON SWITCH - RADIUS VARIANTS
     ======================================================================== */
  --ctt-button-switch-radius-s: var(--ctt-base-shape-radius-xs);
  /* 4px */

  /* ========================================================================
     BUTTON SWITCH - CONTAINER
     ======================================================================== */

  /* Container - Border */
  --ctt-button-switch-container-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-button-switch-container-border-default: var(--ctt-core-color-neutral-300);
  --ctt-button-switch-container-border-hover: var(--ctt-core-color-neutral-400);

  /* Container - Background */
  --ctt-button-switch-container-bg: var(--ctt-core-color-basic-white);

  /* ========================================================================
     BUTTON SWITCH - LABEL
     ======================================================================== */
  --ctt-button-switch-label-margin-bottom: var(--ctt-core-space-1);
  /* 8px */
  --ctt-button-switch-label-font-size: var(--ctt-core-font-size-md);
  /* 14px */
  --ctt-button-switch-label-font-size-small: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-button-switch-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-button-switch-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 20px */
  --ctt-button-switch-label-color: var(--ctt-core-color-neutral-800);

  /* ========================================================================
     BUTTON SWITCH - OPTION (BUTTON)
     ======================================================================== */

  /* Option - Typography */
  --ctt-button-switch-option-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-button-switch-option-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-button-switch-option-line-height: var(--ctt-core-line-height-body-lg);
  /* 26px */

  /* Option - Colors */
  --ctt-button-switch-option-fg-default: var(--ctt-core-color-neutral-800);
  --ctt-button-switch-option-fg-selected: var(--ctt-core-color-basic-white);
  --ctt-button-switch-option-bg-hover: var(--ctt-core-color-neutral-100);

  /* Option - Focus */
  --ctt-button-switch-option-focus-color: var(--ctt-core-color-primary-500);

  /* ========================================================================
     BUTTON SWITCH - VARIANT - PRIMARY
     ======================================================================== */

  /* Primary - Slider Background */
  --ctt-button-switch-primary-slider-bg-default: var(--ctt-core-color-primary-500);
  --ctt-button-switch-primary-slider-bg-hover: var(--ctt-core-color-primary-600);

  /* ========================================================================
     BUTTON SWITCH - VARIANT - SECONDARY
     ======================================================================== */

  /* Secondary - Slider Background */
  --ctt-button-switch-secondary-slider-bg-default: var(--ctt-core-color-neutral-800);
  --ctt-button-switch-secondary-slider-bg-hover: var(--ctt-core-color-neutral-900);

  /* ========================================================================
     CARD COMPONENT TOKENS
     ======================================================================== */

  /* ========================================================================
     CARD - CONTAINER
     ======================================================================== */
  --ctt-card-container-bg-default: var(--ctt-core-color-basic-white);
  --ctt-card-container-bg-selected: var(--ctt-base-surface-subtle);
  --ctt-card-container-bg-secondary: var(--ctt-base-surface-muted);
  --ctt-card-container-bg-disabled: var(--ctt-base-surface-muted);
  --ctt-card-container-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-card-container-border-width-selected: var(--ctt-base-shape-border-width-thin);
  --ctt-card-container-border-default: var(--ctt-base-border-subtle);
  --ctt-card-container-border-secondary: var(--ctt-base-border-muted);
  --ctt-base-border-muted: var(--ctt-core-color-neutral-400);
  --ctt-card-container-border-selected: var(--ctt-base-border-default);
  --ctt-card-radius-default: var(--ctt-core-radius-md);
  /* 12px */
  --ctt-card-radius-mobile: var(--ctt-core-radius-sm);
  /* 8px */

  /* ========================================================================
     CARD - SHADOW
     ======================================================================== */
  --ctt-card-shadow-default: 0 2px 4px rgba(0, 0, 0, 0.1);
  --ctt-card-shadow-selected: 0 4px 8px rgba(0, 0, 0, 0.15);

  /* ========================================================================
     CARD - SIZE - DEFAULT
     ======================================================================== */
  --ctt-card-size-default-padding: var(--ctt-core-space-4);
  /* 16px */
  --ctt-card-size-default-padding-tablet: var(--ctt-core-space-5);
  /* 20px */

  /* ========================================================================
     CARD - SIZE - SMALL
     ======================================================================== */
  --ctt-card-size-small-padding: var(--ctt-core-space-3);
  /* 12px */

  /* ========================================================================
     CARD - SPACING
     ======================================================================== */
  --ctt-card-spacing-header-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-card-spacing-header-gap-small: var(--ctt-core-space-2);
  /* 8px */
  --ctt-card-spacing-header-gap-mobile: var(--ctt-core-space-2);
  /* 8px */
  --ctt-card-spacing-footer-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-card-spacing-footer-gap-small: var(--ctt-core-space-2);
  /* 8px */
  --ctt-card-spacing-section: var(--ctt-core-space-4);
  /* 12px */
  --ctt-card-spacing-content-margin: var(--ctt-core-space-2);
  /* 8px */
  --ctt-card-spacing-content-list-indent: var(--ctt-core-space-4);
  /* 16px */
  --ctt-card-spacing-content-list-item: var(--ctt-core-space-1);
  /* 4px */
  --ctt-card-spacing-content-heading: var(--ctt-core-space-3);
  /* 12px */

  /* ========================================================================
     CARD - TITLE
     ======================================================================== */
  --ctt-card-title-font-family: var(--ctt-core-font-family-sans);
  --ctt-card-title-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-card-title-font-size: var(--ctt-core-font-size-xl);
  /* 20px */
  --ctt-card-title-line-height: var(--ctt-core-line-height-heading-xs);
  /* 28px */
  --ctt-card-title-color: var(--ctt-core-color-neutral-900);

  /* Title - Small Size */
  --ctt-card-title-small-font-size: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-card-title-small-line-height: var(--ctt-core-line-height-body-lg);
  /* 26px */

  /* ========================================================================
     CARD - DESCRIPTION
     ======================================================================== */
  --ctt-card-description-font-family: var(--ctt-core-font-family-sans);
  --ctt-card-description-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-card-description-font-size: var(--ctt-core-font-size-sm);
  /* 12px */
  --ctt-card-description-line-height: var(--ctt-core-line-height-body-sm);
  /* 20px */
  --ctt-card-description-color: var(--ctt-core-color-neutral-600);
  --ctt-card-description-opacity: 1;

  /* Description - Small Size */
  --ctt-card-description-small-font-size: var(--ctt-core-font-size-xs);
  /* 12px */
  --ctt-card-description-small-line-height: var(--ctt-core-line-height-label-sm);
  /* 18px */

  /* ========================================================================
     CARD - CONTENT
     ======================================================================== */
  --ctt-card-content-font-family: var(--ctt-core-font-family-sans);
  --ctt-card-content-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-card-content-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-card-content-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */
  --ctt-card-content-color: var(--ctt-core-color-neutral-900);

  /* Content - Small Size */
  --ctt-card-content-small-font-size: var(--ctt-core-font-size-sm);
  /* 12px */
  --ctt-card-content-small-line-height: var(--ctt-core-line-height-label-sm);
  /* 18px */

  /* Content - Heading */
  --ctt-card-content-heading-font-family: var(--ctt-core-font-family-sans);
  --ctt-card-content-heading-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-card-content-heading-color: var(--ctt-core-color-neutral-900);

  /* ========================================================================
     CARD - PRICE
     ======================================================================== */
  --ctt-card-price-font-family: var(--ctt-core-font-family-sans);
  --ctt-card-price-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-card-price-font-size: var(--ctt-core-font-size-xl);
  /* 20px */
  --ctt-card-price-line-height: var(--ctt-core-line-height-heading-xs);
  /* 28px */
  --ctt-card-price-color: var(--ctt-core-color-neutral-900);
  --ctt-card-price-bg: var(--ctt-core-color-neutral-50);
  --ctt-card-price-padding-y: var(--ctt-core-space-1);
  /* 4px */
  --ctt-card-price-padding-x: var(--ctt-core-space-2);
  /* 8px */
  --ctt-card-price-radius: var(--ctt-core-radius-sm);
  /* 8px */

  /* Price - Small Size */
  --ctt-card-price-small-font-size: var(--ctt-core-font-size-xs);
  /* 12px */

  /* ========================================================================
     CARD - ACTIONS (FOOTER)
     ======================================================================== */
  --ctt-card-actions-font-family: var(--ctt-core-font-family-sans);
  --ctt-card-actions-font-weight: var(--ctt-core-font-weight-bold);
  /* 700 */
  --ctt-card-actions-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-card-actions-line-height: var(--ctt-core-line-height-label-md);
  /* 20px */
  --ctt-card-actions-border-color: var(--ctt-core-color-neutral-300);

  /* ========================================================================
     CARD - CHECK ICON (SELECTED STATE)
     ======================================================================== */
  --ctt-card-check-bg: var(--ctt-core-color-semantic-success-500);
  --ctt-card-check-fg: var(--ctt-core-color-basic-white);
  --ctt-card-check-size: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-card-check-size-small: var(--ctt-core-size-icon-s);
  /* 14px */

  /* ========================================================================
     CARD - STATE - DISABLED
     ======================================================================== */
  --ctt-card-state-disabled-fg: var(--ctt-core-color-neutral-400);
  --ctt-card-state-disabled-opacity: 0.6;

  /* ========================================================================
     CARD - STATE - LOADING
     ======================================================================== */
  --ctt-card-loading-overlay-bg: rgba(255, 255, 255, 0.8);
  --ctt-card-loading-spinner-size: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-card-loading-spinner-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-card-loading-spinner-border-color: var(--ctt-core-color-neutral-300);
  --ctt-card-loading-spinner-border-top-color: var(--ctt-core-color-primary-500);

  /* ========================================================================
     CARD - UTILITY VARIANTS
     ======================================================================== */
  --ctt-card-no-padding-section-padding: var(--ctt-core-space-6);
  /* 24px */
  --ctt-card-compact-padding: var(--ctt-core-space-4);
  /* 16px */
  --ctt-card-compact-header-margin: var(--ctt-core-space-2);
  /* 8px */

  /* ========================================================================
     COMPONENT TOKENS - CHECKBOX
     ========================================================================
     
     Checkbox component tokens following the 4-layer token hierarchy.
     All tokens reference core tokens to maintain proper design system governance.
     
     Structure:
     - Container/Root: Layout and spacing properties
     - Control: The checkbox square (border, background, dimensions)
     - Checkmark: The check icon inside the control
     - Label: Typography for the checkbox label
     - Required: Required indicator styling
     - Error State: Error state styling and messages
     - Disabled State: Disabled state styling
     - Focus State: Focus ring and interaction states
     - Groups: Checkbox group layouts (vertical/horizontal)
     ======================================================================== */

  /* ========================================================================
     CHECKBOX - CONTAINER / ROOT
     ======================================================================== */
  --ctt-checkbox-root-gap: var(--ctt-core-space-2);
  /* 8px gap between checkbox & label */
  --ctt-checkbox-root-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */

  /* ========================================================================
     CHECKBOX - CONTROL (THE CHECKBOX SQUARE)
     ======================================================================== */
  /* Control - Dimensions */
  --ctt-checkbox-control-size: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-checkbox-control-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */

  /* Control - Background Colors */
  --ctt-checkbox-control-bg-default: var(--ctt-core-color-basic-white);
  --ctt-checkbox-control-bg-hover: var(--ctt-core-color-neutral-100);
  --ctt-checkbox-control-bg-checked: var(--ctt-core-color-primary-500);
  --ctt-checkbox-control-bg-checked-hover: var(--ctt-core-color-primary-500);
  --ctt-checkbox-control-bg-disabled: var(--ctt-core-color-neutral-200);
  --ctt-checkbox-control-bg-error: var(--ctt-core-color-semantic-negative-50);
  --ctt-checkbox-control-bg-error-checked: var(--ctt-core-color-semantic-negative-50);

  /* Control - Border Colors */
  --ctt-checkbox-control-border-default: var(--ctt-core-color-neutral-400);
  --ctt-checkbox-control-border-hover: var(--ctt-core-color-neutral-500);
  --ctt-checkbox-control-border-checked: var(--ctt-core-color-primary-500);
  --ctt-checkbox-control-border-focus: var(--ctt-core-color-primary-500);
  --ctt-checkbox-control-border-disabled: var(--ctt-core-color-neutral-300);
  --ctt-checkbox-control-border-error: var(--ctt-base-input-border-error);
  --ctt-checkbox-control-border-error-width: var(--ctt-core-border-width-thin);
  /* 2px */

  /* Control - Focus State */
  --ctt-checkbox-control-focus-shadow-color: rgba(26, 120, 194, 0.2);
  /* Primary with opacity */
  --ctt-checkbox-control-focus-shadow-size: 3px;
  --ctt-checkbox-control-focus-error-shadow-color: rgba(223,
      0,
      36,
      0.2);
  /* Negative with opacity */

  /* Control - Transition */
  --ctt-checkbox-control-transition-duration: 0.15s;

  /* ========================================================================
     CHECKBOX - CHECKMARK ICON
     ======================================================================== */
  --ctt-checkbox-checkmark-size: var(--ctt-core-size-icon-xs);
  /* 12px */
  --ctt-checkbox-checkmark-color-default: var(--ctt-core-color-basic-white);
  --ctt-checkbox-checkmark-color-disabled: var(--ctt-core-color-neutral-500);
  --ctt-checkbox-checkmark-color-error: var(--ctt-core-color-primary-500);
  --ctt-checkbox-checkmark-transition-duration: 0.1s;

  /* ========================================================================
     CHECKBOX - LABEL
     ======================================================================== */
  --ctt-checkbox-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-checkbox-label-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-checkbox-label-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-checkbox-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 20px */
  --ctt-checkbox-label-color-default: var(--ctt-core-color-neutral-700);
  --ctt-checkbox-label-color-disabled: var(--ctt-core-color-neutral-500);

  /* ========================================================================
     CHECKBOX - REQUIRED INDICATOR
     ======================================================================== */
  --ctt-checkbox-required-color: var(--ctt-core-color-semantic-negative-500);
  --ctt-checkbox-required-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-checkbox-required-margin: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     CHECKBOX - ERROR STATE
     ======================================================================== */
  --ctt-checkbox-error-message-color: var(--ctt-base-on-error-fg);
  --ctt-checkbox-error-message-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-checkbox-error-message-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-checkbox-error-message-line-height: var(--ctt-core-line-height-label-sm);
  /* 18px */
  --ctt-checkbox-error-message-gap: var(--ctt-core-space-1);
  /* 4px between icon and text */
  --ctt-checkbox-error-message-margin: var(--ctt-core-space-1);
  /* 4px top margin */
  --ctt-checkbox-error-icon-size: var(--ctt-core-size-icon-m);
  /* 16px */

  /* ========================================================================
     CHECKBOX - GROUP LAYOUT
     ======================================================================== */
  --ctt-checkbox-group-gap-vertical: var(--ctt-core-space-3);
  /* 12px between checkboxes */
  --ctt-checkbox-group-gap-horizontal: var(--ctt-core-space-6);
  /* 24px between horizontal checkboxes */

  /* ========================================================================
     CHECKBOX - SIZE VARIANTS
     ======================================================================== */
  /* Small Variant (16px checkbox) */
  --ctt-checkbox-control-size-small: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-checkbox-checkmark-size-small: var(--ctt-core-size-icon-xs);
  /* 12px */
  --ctt-checkbox-label-font-size-small: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-checkbox-label-line-height-small: var(--ctt-core-line-height-body-sm);
  /* 20px */

  /* Medium Variant (24px checkbox) - DEFAULT */
  --ctt-checkbox-control-size-medium: var(--ctt-core-size-icon-xl);
  /* 24px */
  --ctt-checkbox-checkmark-size-medium: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-checkbox-label-font-size-medium: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-checkbox-label-line-height-medium: var(--ctt-core-line-height-body-md);
  /* 24px */

  /* Large Variant (32px checkbox) */
  --ctt-checkbox-control-size-large: var(--ctt-core-size-icon-2xl);
  /* 32px */
  --ctt-checkbox-checkmark-size-large: var(--ctt-core-size-icon-xl);
  /* 24px */
  --ctt-checkbox-label-font-size-large: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-checkbox-label-line-height-large: var(--ctt-core-line-height-body-lg);
  /* 26px */

  /* ==========================================================================
     COMPONENT TOKENS - RADIO BUTTON
     ==========================================================================
     Radio Button Component Tokens
     
     Purpose: All styling tokens for the RadioButton component
     Architecture: Component tokens → Base tokens → Core tokens
     
     Structure:
     - Container: Root container and font family
     - Root Label Container: Layout for the clickable area
     - Control (Radio Dot): The circular radio button itself
     - Inner Dot: The checked indicator inside the radio button
     - Label: Text label styling
     - Required Indicator: Asterisk for required fields
     - Error State: Error styling and messages
     - Disabled State: Disabled appearance
     - Group Layout: Spacing for radio button groups
     ======================================================================== */

  /* ========================================================================
     RADIO BUTTON - CONTAINER / ROOT
     ======================================================================== */
  --ctt-radio-button-font-family: var(--ctt-core-font-family-sans);

  /* ========================================================================
     RADIO BUTTON - ROOT LABEL CONTAINER
     ======================================================================== */
  --ctt-radio-button-root-gap: var(--ctt-core-space-2);
  /* 8px gap between radio dot & label */
  --ctt-radio-button-root-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */

  /* ========================================================================
     RADIO BUTTON - CONTROL (THE RADIO DOT)
     ======================================================================== */
  /* Control - Dimensions */
  --ctt-radio-button-control-size: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-radio-button-control-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-radio-button-control-border-radius: 50%;
  /* Always circular */

  /* Control - Background Colors */
  --ctt-radio-button-control-bg-default: var(--ctt-core-color-basic-white);
  --ctt-radio-button-control-bg-hover: var(--ctt-core-color-neutral-100);
  --ctt-radio-button-control-bg-checked: var(--ctt-core-color-primary-500);
  --ctt-radio-button-control-bg-checked-hover: var(--ctt-core-color-primary-500);
  --ctt-radio-button-control-bg-disabled: var(--ctt-core-color-neutral-200);
  --ctt-radio-button-control-bg-error: var(--ctt-core-color-semantic-negative-50);
  --ctt-radio-button-control-bg-error-checked: var(--ctt-core-color-semantic-negative-50);

  /* Control - Border Colors */
  --ctt-radio-button-control-border-default: var(--ctt-core-color-neutral-400);
  --ctt-radio-button-control-border-hover: var(--ctt-core-color-neutral-500);
  --ctt-radio-button-control-border-checked: var(--ctt-core-color-primary-500);
  --ctt-radio-button-control-border-focus: var(--ctt-core-color-primary-500);
  --ctt-radio-button-control-border-disabled: var(--ctt-core-color-neutral-300);
  --ctt-radio-button-control-border-error: var(--ctt-base-input-border-error);
  --ctt-radio-button-control-border-error-width: var(--ctt-core-border-width-thin);
  /* 2px */

  /* Control - Focus State */
  --ctt-radio-button-control-focus-shadow-color: rgba(26, 120, 194, 0.2);
  /* Primary with opacity */
  --ctt-radio-button-control-focus-shadow-size: 3px;
  --ctt-radio-button-control-focus-error-shadow-color: rgba(223,
      0,
      36,
      0.2);
  /* Negative with opacity */

  /* Control - Transition */
  --ctt-radio-button-control-transition-duration: 0.15s;

  /* ========================================================================
     RADIO BUTTON - INNER DOT (CHECKED STATE INDICATOR)
     ======================================================================== */
  --ctt-radio-button-inner-dot-size: var(--ctt-core-space-2);
  /* 8px */
  --ctt-radio-button-inner-dot-color-default: var(--ctt-core-color-basic-white);
  --ctt-radio-button-inner-dot-color-disabled: var(--ctt-core-color-neutral-500);
  --ctt-radio-button-inner-dot-color-error: var(--ctt-core-color-primary-500);
  --ctt-radio-button-inner-dot-transition-duration: 0.1s;

  /* ========================================================================
     RADIO BUTTON - LABEL
     ======================================================================== */
  --ctt-radio-button-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-radio-button-label-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-radio-button-label-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-radio-button-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 20px */
  --ctt-radio-button-label-color-default: var(--ctt-core-color-neutral-700);
  --ctt-radio-button-label-color-disabled: var(--ctt-core-color-neutral-500);

  /* ========================================================================
     RADIO BUTTON - REQUIRED INDICATOR
     ======================================================================== */
  --ctt-radio-button-required-color: var(--ctt-core-color-semantic-negative-500);
  --ctt-radio-button-required-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-radio-button-required-margin: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     RADIO BUTTON - ERROR STATE
     ======================================================================== */
  --ctt-radio-button-error-message-color: var(--ctt-base-on-error-fg);
  --ctt-radio-button-error-message-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-radio-button-error-message-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-radio-button-error-message-line-height: var(--ctt-core-line-height-label-sm);
  /* 18px */
  --ctt-radio-button-error-message-gap: var(--ctt-core-space-1);
  /* 4px between icon and text */
  --ctt-radio-button-error-message-margin: var(--ctt-core-space-1);
  /* 4px top margin */
  --ctt-radio-button-error-icon-size: var(--ctt-core-size-icon-m);
  /* 16px */

  /* ========================================================================
     RADIO BUTTON - GROUP LAYOUT
     ======================================================================== */
  --ctt-radio-button-group-gap-vertical: var(--ctt-core-space-3);
  /* 12px between radio buttons */
  --ctt-radio-button-group-gap-horizontal: var(--ctt-core-space-6);
  /* 24px between horizontal radio buttons */

  /* ==========================================================================
     COMPONENT TOKENS - CHIP
     ========================================================================== */

  /* ========================================================================
     CHIP - ROOT/CONTAINER
     ======================================================================== */
  --ctt-chip-gap: var(--ctt-core-space-2);
  /* 8px - gap between icon/avatar and label */
  --ctt-chip-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-chip-transition-duration: 0.2s;
  --ctt-chip-transition: all var(--ctt-chip-transition-duration) ease-in-out;

  /* ========================================================================
     CHIP - TYPOGRAPHY
     ======================================================================== */
  --ctt-chip-font-family: var(--ctt-core-font-family-sans);
  --ctt-chip-font-weight-default: var(--ctt-core-font-weight-medium);
  --ctt-chip-font-weight-selected: var(--ctt-core-font-weight-bold);
  --ctt-chip-line-height: var(--ctt-core-line-height-label-sm);
  /* 18px */

  /* ========================================================================
     CHIP - COLORS - DEFAULT STATE
     ======================================================================== */
  --ctt-chip-color-default: var(--ctt-core-color-neutral-700);
  --ctt-chip-bg-default: transparent;
  --ctt-chip-border-color-default: var(--ctt-base-border-subtle);

  /* ========================================================================
     CHIP - COLORS - HOVER STATE
     ======================================================================== */
  --ctt-chip-bg-hover: var(--ctt-core-color-neutral-100);

  /* ========================================================================
     CHIP - COLORS - ACTIVE STATE
     ======================================================================== */
  --ctt-chip-bg-active: var(--ctt-core-color-neutral-200);

  /* ========================================================================
     CHIP - COLORS - SELECTED STATE
     ======================================================================== */
  --ctt-chip-bg-selected: var(--ctt-core-color-primary-500);
  --ctt-chip-border-color-selected: var(--ctt-core-color-primary-500);
  --ctt-chip-color-selected: var(--ctt-core-color-basic-white);
  /* White text */

  /* ========================================================================
     CHIP - COLORS - SELECTED HOVER STATE
     ======================================================================== */
  --ctt-chip-bg-selected-hover: var(--ctt-core-color-primary-600);
  --ctt-chip-border-color-selected-hover: var(--ctt-core-color-primary-600);
  --ctt-chip-color-selected-hover: var(--ctt-core-color-basic-white);

  /* ========================================================================
     CHIP - COLORS - DISABLED STATE
     ======================================================================== */
  --ctt-chip-opacity-disabled: 0.5;

  /* ========================================================================
     CHIP - SIZE - SMALL (s)
     ======================================================================== */
  --ctt-chip-padding-s-vertical: var(--ctt-core-space-1);
  /* 4px */
  --ctt-chip-padding-s-horizontal: var(--ctt-core-space-3);
  /* 12px */
  --ctt-chip-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-chip-height-s: var(--ctt-core-size-control-m);
  /* 32px */
  --ctt-chip-icon-size-s: var(--ctt-core-size-icon-s);
  /* 14px */

  /* ========================================================================
     CHIP - SIZE - MEDIUM (m)
     ======================================================================== */
  --ctt-chip-padding-m-vertical: var(--ctt-core-space-2);
  /* 8px */
  --ctt-chip-padding-m-horizontal: var(--ctt-core-space-4);
  /* 16px */
  --ctt-chip-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-chip-height-m: var(--ctt-core-size-control-l);
  /* 40px */
  --ctt-chip-icon-size-m: var(--ctt-core-size-icon-m);
  /* 16px */

  /* ========================================================================
     CHIP - SIZE - LARGE (l)
     ======================================================================== */
  --ctt-chip-padding-l-vertical: var(--ctt-core-space-3);
  /* 12px */
  --ctt-chip-padding-l-horizontal: var(--ctt-core-space-5);
  /* 20px */
  --ctt-chip-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-chip-height-l: var(--ctt-core-size-control-xl);
  /* 48px */
  --ctt-chip-icon-size-l: var(--ctt-core-size-icon-l);
  /* 18px */

  /* ========================================================================
     CHIP - BORDER RADIUS / SHAPES
     ======================================================================== */
  --ctt-chip-border-radius-none: 0;
  --ctt-chip-border-radius-xs: var(--ctt-core-radius-xs);
  /* 4px */
  --ctt-chip-border-radius-s: var(--ctt-core-radius-sm);
  /* 8px */
  --ctt-chip-border-radius-pill: var(--ctt-core-radius-pill);
  /* 999px */

  /* ========================================================================
     CHIP - AVATAR
     ======================================================================== */
  --ctt-chip-avatar-size: var(--ctt-core-space-6);
  /* 24px */

  /* ========================================================================
     CHIP - REMOVE BUTTON
     ======================================================================== */
  --ctt-chip-remove-transition-duration: 0.2s;
  --ctt-chip-remove-opacity-default: 1;
  --ctt-chip-remove-opacity-hover: 1;
  --ctt-chip-remove-opacity-disabled: 0.5;
  --ctt-chip-remove-focus-outline-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-chip-remove-focus-outline-offset: var(--ctt-core-space-px);
  /* 1px */
  --ctt-chip-remove-focus-border-radius: var(--ctt-core-border-width-thin);
  /* 2px */

  /* ========================================================================
     CHIP - REMOVABLE PADDING ADJUSTMENTS
     ======================================================================== */
  --ctt-chip-removable-padding-right-s: var(--ctt-core-space-2);
  /* 8px */
  --ctt-chip-removable-padding-right-m: var(--ctt-core-space-3);
  /* 12px */
  --ctt-chip-removable-padding-right-l: var(--ctt-core-space-4);
  /* 16px */

  /* ========================================================================
     ICON COMPONENT TOKENS
     ======================================================================== */

  /* ========================================================================
     ICON - SIZE
     ======================================================================== */
  --ctt-icon-size-xs: var(--ctt-core-size-icon-xs);
  /* 12px */
  --ctt-icon-size-s: var(--ctt-core-size-icon-s);
  /* 14px */
  --ctt-icon-size-m: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-icon-size-l: var(--ctt-core-size-icon-l);
  /* 18px */
  --ctt-icon-size-xl: var(--ctt-core-space-5);
  /* 20px */
  --ctt-icon-size-2xl: var(--ctt-core-size-icon-xl);
  /* 24px */
  --ctt-icon-size-3xl: var(--ctt-core-space-7);
  /* 28px */
  --ctt-icon-size-4xl: var(--ctt-core-size-icon-2xl);
  /* 32px */
  --ctt-icon-size-6xl: var(--ctt-core-size-icon-3xl);
  /* 48px */

  /* ========================================================================
     ICON - COLOR
     ======================================================================== */
  --ctt-icon-color-default: currentColor;
  --ctt-icon-color-primary: var(--ctt-core-color-primary-500);
  /* #DF0024 */
  --ctt-icon-color-secondary: var(--ctt-core-color-neutral-800);
  /* #333333 */
  --ctt-icon-color-success: var(--ctt-core-color-semantic-success-500);
  /* #28A745 */
  --ctt-icon-color-warning: var(--ctt-core-color-semantic-warning-500);
  /* #FF9800 */
  --ctt-icon-color-error: var(--ctt-core-color-semantic-negative-500);
  /* #E53935 */
  --ctt-icon-color-info: var(--ctt-core-color-semantic-informative-500);
  /* #2196F3 */
  --ctt-icon-color-neutral: var(--ctt-core-color-neutral-600);
  /* #666666 */
  --ctt-icon-color-white: var(--ctt-core-color-basic-white);
  /* #FFFFFF */

  /* ========================================================================
     ICON - FONT
     ======================================================================== */
  --ctt-icon-font-family: 'ctt-icons';
  --ctt-icon-font-style: normal;
  --ctt-icon-font-weight: normal;
  --ctt-icon-font-variant: normal;
  --ctt-icon-line-height: 1;

  /* ========================================================================
     ICON - INTERACTIVE
     ======================================================================== */
  --ctt-icon-color-interactive-opacity-hover: 0.8;
  --ctt-icon-color-interactive-opacity-active: 0.6;

  /* ========================================================================
     INPUT COUNTER COMPONENT TOKENS
     ======================================================================== */

  /* ========================================================================
     INPUT COUNTER - WIDTH
     ======================================================================== */
  --ctt-input-counter-width: auto;
  --ctt-input-counter-wrapper-width-s: 60px;
  --ctt-input-counter-wrapper-width-m: 80px;
  --ctt-input-counter-wrapper-width-l: 100px;

  /* ========================================================================
     INPUT COUNTER - HEIGHT
     ======================================================================== */
  --ctt-input-counter-height-s: var(--ctt-core-size-control-l);
  /* 24px */
  --ctt-input-counter-height-m: var(--ctt-core-size-control-xl);
  /* 32px */
  --ctt-input-counter-height-l: var(--ctt-core-size-control-2xl);
  /* 40px */

  /* ========================================================================
     INPUT COUNTER - SPACING
     ======================================================================== */
  --ctt-input-counter-gap: var(--ctt-core-space-2);
  /* 8px */
  --ctt-input-counter-label-margin-bottom: var(--ctt-core-space-1);
  /* 8px */
  --ctt-input-counter-required-margin-left: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     INPUT COUNTER - TYPOGRAPHY - LABEL
     ======================================================================== */
  --ctt-input-counter-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-counter-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 12px */
  --ctt-input-counter-label-font-size-m: var(--ctt-core-font-size-md);
  /* 12px */
  --ctt-input-counter-label-font-size-l: var(--ctt-core-font-size-md);
  /* 14px */
  --ctt-input-counter-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-input-counter-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 20px */

  /* ========================================================================
     INPUT COUNTER - TYPOGRAPHY - INPUT
     ======================================================================== */
  --ctt-input-counter-input-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-counter-input-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-counter-input-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-counter-input-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-input-counter-input-text-align: center;

  /* ========================================================================
     INPUT COUNTER - COLORS - LABEL
     ======================================================================== */
  --ctt-input-counter-label-color-default: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-input-counter-label-color-disabled: var(--ctt-base-text-weak);
  /* neutral-600 */
  --ctt-input-counter-required-color: var(--ctt-base-text-brand);
  /* primary-500 */

  /* ========================================================================
     INPUT COUNTER - COLORS - INPUT
     ======================================================================== */
  --ctt-input-counter-input-bg-default: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-counter-input-bg-disabled: var(--ctt-base-surface-muted);
  /* neutral-100 */
  --ctt-input-counter-input-color-default: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-input-counter-input-color-disabled: var(--ctt-base-text-weak);
  /* neutral-600 */
  --ctt-input-counter-input-border-default: var(--ctt-base-border-default);
  /* neutral-500 */
  --ctt-input-counter-input-border-disabled: var(--ctt-base-border-subtle);
  /* neutral-300 */
  --ctt-input-counter-input-border-focus: var(--ctt-base-border-focus);
  /* informative-600 */
  --ctt-input-counter-placeholder-color: var(--ctt-base-text-placeholder)
    /* ========================================================================
     INPUT COUNTER - BORDER
     ======================================================================== */
    --ctt-input-counter-border-width-m: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-counter-border-width-l: var(--ctt-core-border-width-thin);
  /* 2px */

  /* ========================================================================
     INPUT COUNTER - STATE
     ======================================================================== */
  --ctt-input-counter-disabled-opacity: 0.6;
  --ctt-input-counter-transition-duration: 0.2s;
  --ctt-input-counter-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================================================
     INPUT COUNTER - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-input-counter-mobile-gap: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-counter-mobile-wrapper-width-s: 50px;
  --ctt-input-counter-mobile-wrapper-width-m: 60px;
  --ctt-input-counter-mobile-wrapper-width-l: 80px;

  /* ========================================================================
     INPUT COUNTER - ACCESSIBILITY
     ======================================================================== */
  --ctt-input-counter-focus-outline-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-counter-high-contrast-border-color: var(--ctt-core-color-neutral-900);
  --ctt-input-counter-high-contrast-focus-color: var(--ctt-core-color-primary-500);

  /* ========================================================================
     INPUT TEXT COMPONENT TOKENS
     ======================================================================== */

  /* ========================================================================
     INPUT TEXT - WIDTH
     ======================================================================== */
  --ctt-input-text-width: 100%;

  /* ========================================================================
     INPUT TEXT - HEIGHT
     ======================================================================== */
  --ctt-input-text-height-s: var(--ctt-core-size-control-m);
  /* 24px */
  --ctt-input-text-height-m: var(--ctt-core-size-control-xl);
  /* 32px */
  --ctt-input-text-height-l: var(--ctt-core-size-control-2xl);
  /* 40px */

  /* ========================================================================
     INPUT TEXT - PADDING
     ======================================================================== */
  --ctt-input-text-padding-vertical-s: 6px;
  --ctt-input-text-padding-horizontal-s: 10px;
  --ctt-input-text-padding-vertical-m: 0px;
  --ctt-input-text-padding-horizontal-m: var(--ctt-core-space-4);
  /* 16px */
  --ctt-input-text-padding-vertical-l: var(--ctt-core-space-3);
  /* 12px */
  --ctt-input-text-padding-horizontal-l: var(--ctt-core-space-4);
  /* 16px */

  /* Default padding (large) */
  --ctt-input-text-padding-vertical: var(--ctt-core-space-2);
  /* 8px */
  --ctt-input-text-padding-horizontal: var(--ctt-core-space-3);
  /* 12px */

  /* Focus state padding adjustments (subtract 1px for border) */
  --ctt-input-text-padding-focus-adjustment: 1px;

  /* ========================================================================
     INPUT TEXT - SPACING
     ======================================================================== */
  --ctt-input-text-label-margin-bottom: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-text-required-margin-left: 2px;
  --ctt-input-text-error-margin-top: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-text-error-gap: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     INPUT TEXT - TYPOGRAPHY - LABEL
     ======================================================================== */
  --ctt-input-text-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-text-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-text-label-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-text-label-font-size-l: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-text-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-input-text-label-line-height: var(--ctt-base-text-style-label-md-line-height);

  /* ========================================================================
     INPUT TEXT - TYPOGRAPHY - INPUT
     ======================================================================== */
  --ctt-input-text-input-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-text-input-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-text-input-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-text-input-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-input-text-input-line-height: 1.4;

  /* ========================================================================
     INPUT TEXT - TYPOGRAPHY - ERROR
     ======================================================================== */
  --ctt-input-text-error-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-text-error-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */

  /* ========================================================================
     INPUT TEXT - COLORS - LABEL
     ======================================================================== */
  --ctt-input-text-label-color-default: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-input-text-required-color: var(--ctt-base-state-error-fg);
  /* negative-500 */

  /* ========================================================================
     INPUT TEXT - COLORS - INPUT
     ======================================================================== */
  --ctt-input-text-input-bg-default: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-text-input-bg-focus: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-text-input-bg-disabled: var(--ctt-base-surface-muted);
  /* neutral-100 */
  --ctt-input-text-input-color-default: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-input-text-input-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-600 */
  --ctt-input-text-input-border-default: var(--ctt-base-border-default);
  /* neutral-500 */
  --ctt-input-text-input-border-hover: var(--ctt-base-border-hover);
  /* neutral-600 */
  --ctt-input-text-input-border-focus: var(--ctt-base-border-focus);
  /* informative-600 */
  --ctt-input-text-input-border-error: var(--ctt-base-input-border-error);
  /* negative-600 */
  --ctt-input-text-input-border-disabled: var(--ctt-base-border-subtle);
  /* neutral-300 */

  /* ========================================================================
     INPUT TEXT - COLORS - PLACEHOLDER
     ======================================================================== */
  --ctt-input-text-placeholder-color: var(--ctt-base-text-placeholder);
  /* neutral-600 */
  --ctt-input-text-placeholder-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-400 */

  /* ========================================================================
     INPUT TEXT - COLORS - ERROR
     ======================================================================== */
  --ctt-input-text-error-color: var(--ctt-base-on-error-fg);
  /* negative-500 */

  /* ========================================================================
     INPUT TEXT - BORDER
     ======================================================================== */
  --ctt-input-text-border-width-default: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-text-border-width-focus: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-text-border-width-error: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-text-border-radius: var(--ctt-core-radius-xs);
  /* 4px */

  /* ========================================================================
     INPUT TEXT - STATE
     ======================================================================== */
  --ctt-input-text-transition-duration: 0.2s;
  --ctt-input-text-transition-timing: ease;

  /* ========================================================================
     INPUT TEXT - ERROR ICON
     ======================================================================== */
  --ctt-input-text-error-icon-size: 16px;

  /* ========================================================================
     INPUT TEXT - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-input-text-mobile-font-size: var(--ctt-core-font-size-md);
  /* 16px - Prevents zoom on iOS */

  /* ========================================================================
     INPUT TEXT - ACCESSIBILITY
     ======================================================================== */
  --ctt-input-text-high-contrast-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-text-high-contrast-focus-border-width: var(--ctt-core-border-width-thick);
  /* 3px */
  --ctt-input-text-high-contrast-focus-padding-adjustment: 2px;

  /* ========================================================================
     INPUT MONEY COMPONENT TOKENS
     ======================================================================== */

  /* ========================================================================
     INPUT MONEY - WIDTH
     ======================================================================== */
  --ctt-input-money-width: 100%;

  /* ========================================================================
     INPUT MONEY - HEIGHT
     ======================================================================== */
  --ctt-input-money-height-s: var(--ctt-core-size-control-m);
  /* 24px */
  --ctt-input-money-height-m: var(--ctt-core-size-control-xl);
  /* 32px */
  --ctt-input-money-height-l: var(--ctt-core-size-control-2xl);
  /* 40px */

  /* ========================================================================
     INPUT MONEY - PADDING
     ======================================================================== */
  --ctt-input-money-padding-vertical-s: calc(var(--ctt-core-space-2) - 2px);
  /* 6px */
  --ctt-input-money-padding-horizontal-s: calc(var(--ctt-core-space-3) - 2px);
  /* 10px */
  --ctt-input-money-padding-vertical-m: var(--ctt-core-space-2);
  /* 8px */
  --ctt-input-money-padding-horizontal-m: var(--ctt-core-space-4);
  /* 16px */
  --ctt-input-money-padding-vertical-l: var(--ctt-core-space-3);
  /* 12px */
  --ctt-input-money-padding-horizontal-l: var(--ctt-core-space-4);
  /* 16px */

  /* ========================================================================
     INPUT MONEY - SPACING
     ======================================================================== */
  --ctt-input-money-label-margin-bottom: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-money-required-margin-left: 2px;
  --ctt-input-money-error-margin-top: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-money-error-gap: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     INPUT MONEY - TYPOGRAPHY - LABEL
     ======================================================================== */
  --ctt-input-money-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-money-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-money-label-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-money-label-font-size-l: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-money-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-input-money-label-line-height: var(--ctt-base-text-style-label-md-line-height);

  /* ========================================================================
     INPUT MONEY - TYPOGRAPHY - INPUT
     ======================================================================== */
  --ctt-input-money-input-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-money-input-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-money-input-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-money-input-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-input-money-input-line-height: 1.4;

  /* ========================================================================
     INPUT MONEY - TYPOGRAPHY - CURRENCY
     ======================================================================== */
  --ctt-input-money-currency-font-size-s: var(--ctt-core-font-size-sm);
  /* 12px */
  --ctt-input-money-currency-font-size-m: var(--ctt-core-font-size-md);
  /* 14px */
  --ctt-input-money-currency-font-size-l: var(--ctt-core-font-size-lg);
  /* 14px */
  --ctt-input-money-currency-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */

  /* ========================================================================
     INPUT MONEY - TYPOGRAPHY - ERROR
     ======================================================================== */
  --ctt-input-money-error-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-money-error-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */

  /* ========================================================================
     INPUT MONEY - COLORS - LABEL
     ======================================================================== */
  --ctt-input-money-label-color: var(--ctt-base-text-main);
  /* neutral-900 */
  --ctt-input-money-label-color-disabled: var(--ctt-base-text-weak);
  /* neutral-600 */
  --ctt-input-money-required-color: var(--ctt-base-on-error-fg);
  /* negative-500 */

  /* ========================================================================
     INPUT MONEY - COLORS - INPUT
     ======================================================================== */
  --ctt-input-money-input-bg-default: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-money-input-bg-focus: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-money-input-bg-disabled: var(--ctt-base-surface-disabled);
  /* neutral-100 */
  --ctt-input-money-input-color-default: var(--ctt-base-text-main);
  /* neutral-900 */
  --ctt-input-money-input-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-400 */
  --ctt-input-money-input-border-default: var(--ctt-base-border-default);
  /* neutral-300 */
  --ctt-input-money-input-border-hover: var(--ctt-base-border-hover);
  /* neutral-500 */
  --ctt-input-money-input-border-focus: var(--ctt-base-border-selected);
  /* neutral-900 */
  --ctt-input-money-input-border-error: var(--ctt-base-input-border-error);
  /* negative-500 */
  --ctt-input-money-input-border-disabled: var(--ctt-base-border-disabled);
  /* neutral-200 */

  /* ========================================================================
     INPUT MONEY - COLORS - CURRENCY
     ======================================================================== */
  --ctt-input-money-currency-color: var(--ctt-core-color-neutral-700);
  /* neutral-700 */
  --ctt-input-money-currency-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-400 */
  --ctt-input-money-currency-color-error: var(--ctt-base-action-negative);
  /* negative-500 */

  /* ========================================================================
     INPUT MONEY - COLORS - PLACEHOLDER
     ======================================================================== */
  --ctt-input-money-placeholder-color: var(--ctt-base-text-weak);
  /* neutral-600 */
  --ctt-input-money-placeholder-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-400 */

  /* ========================================================================
     INPUT MONEY - COLORS - ERROR
     ======================================================================== */
  --ctt-input-money-error-color: var(--ctt-base-on-error-fg);
  /* negative-500 */

  /* ========================================================================
     INPUT MONEY - BORDER
     ======================================================================== */
  --ctt-input-money-border-width-default: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-money-border-width-focus: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-money-border-width-error: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-money-border-radius: var(--ctt-core-radius-xs);
  /* 4px */

  /* ========================================================================
     INPUT MONEY - CURRENCY SYMBOL
     ======================================================================== */
  --ctt-input-money-currency-gap: var(--ctt-core-space-2);
  /* 8px */
  --ctt-input-money-currency-offset-s: calc(var(--ctt-core-space-3) - 2px);
  /* 10px */
  --ctt-input-money-currency-offset-m: var(--ctt-core-space-3);
  /* 12px */
  --ctt-input-money-currency-offset-l: var(--ctt-core-space-4);
  /* 16px */

  /* ========================================================================
     INPUT MONEY - STATE
     ======================================================================== */
  --ctt-input-money-transition-duration: 0.2s;
  --ctt-input-money-transition-timing: ease;

  /* ========================================================================
     INPUT MONEY - ERROR ICON
     ======================================================================== */
  --ctt-input-money-error-icon-size: 16px;

  /* ========================================================================
     INPUT MONEY - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-input-money-mobile-font-size: var(--ctt-core-font-size-md);
  /* 16px - Prevents zoom on iOS */

  /* ========================================================================
     INPUT MONEY - ACCESSIBILITY
     ======================================================================== */
  --ctt-input-money-high-contrast-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-money-high-contrast-focus-border-width: var(--ctt-core-border-width-thick);
  /* 3px */

  /* ========================================================================
     LOADING COMPONENT TOKENS
     
     The Loading component displays a spinner with optional counter, title,
     and description. Supports size variants (small, medium, large) and color
     variants (primary, secondary, default).
     ======================================================================== */

  /* ========================================================================
     LOADING - CONTAINER
     ======================================================================== */
  --ctt-loading-container-gap-default: var(--ctt-core-space-4);
  /* 16px */
  --ctt-loading-container-gap-small: var(--ctt-core-space-3);
  /* 12px */
  --ctt-loading-container-gap-large: var(--ctt-core-space-6);
  /* 24px */
  --ctt-loading-container-background: transparent;

  /* ========================================================================
     LOADING - CONTENT LAYOUT
     ======================================================================== */
  --ctt-loading-content-gap-default: var(--ctt-core-space-3);
  /* 12px */
  --ctt-loading-content-gap-side: var(--ctt-core-space-4);
  /* 16px */
  --ctt-loading-content-gap-side-small: var(--ctt-core-space-3);
  /* 12px */
  --ctt-loading-content-gap-side-large: var(--ctt-core-space-6);
  /* 24px */

  /* ========================================================================
     LOADING - SPINNER COLORS (Variants)
     ======================================================================== */
  --ctt-loading-spinner-color-primary: var(--ctt-core-color-primary-500);
  /* primary-500 */
  --ctt-loading-spinner-color-secondary: var(--ctt-core-color-primary-500);
  /* primary-500 */
  --ctt-loading-spinner-color-default: var(--ctt-base-text-main);
  /* neutral-800 */

  /* ========================================================================
     LOADING - SPINNER SIZES
     ======================================================================== */
  --ctt-loading-spinner-size-small: 16px;
  --ctt-loading-spinner-size-medium: 24px;
  --ctt-loading-spinner-size-large: 32px;

  /* ========================================================================
     LOADING - COUNTER
     ======================================================================== */
  --ctt-loading-counter-font-family: var(--ctt-base-font-body);
  /* Acto CTT */
  --ctt-loading-counter-font-weight: var(--ctt-core-font-weight-bold);
  /* 700 */
  --ctt-loading-counter-font-size-small: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-loading-counter-font-size-medium: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-loading-counter-font-size-large: var(--ctt-core-font-size-xl);
  /* 20px */
  --ctt-loading-counter-color: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-loading-counter-min-width-small: 32px;
  --ctt-loading-counter-min-width-default: 1.2em;

  /* ========================================================================
     LOADING - TITLE (Typography)
     ======================================================================== */
  --ctt-loading-title-font-family: var(--ctt-base-font-title);
  /* Acto CTT */
  --ctt-loading-title-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-loading-title-font-size-small: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-loading-title-font-size-medium: var(--ctt-core-font-size-xl);
  /* 20px */
  --ctt-loading-title-font-size-large: var(--ctt-core-font-size-2xl);
  /* 26px */
  --ctt-loading-title-line-height-small: var(--ctt-core-line-height-body-lg);
  /* 26px */
  --ctt-loading-title-line-height-medium: var(--ctt-core-line-height-heading-xs);
  /* 28px */
  --ctt-loading-title-line-height-large: var(--ctt-core-line-height-heading-sm);
  /* 36px */
  --ctt-loading-title-color: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-loading-title-text-align: center;
  --ctt-loading-title-margin: 0;

  /* ========================================================================
     LOADING - DESCRIPTION (Typography)
     ======================================================================== */
  --ctt-loading-description-font-family: var(--ctt-base-font-body);
  /* Acto CTT */
  --ctt-loading-description-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-loading-description-font-size-small: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-loading-description-font-size-medium: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-loading-description-font-size-large: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-loading-description-line-height-small: var(--ctt-core-line-height-body-sm);
  /* 20px */
  --ctt-loading-description-line-height-medium: var(--ctt-core-line-height-body-md);
  /* 24px */
  --ctt-loading-description-line-height-large: var(--ctt-core-line-height-body-lg);
  /* 26px */
  --ctt-loading-description-color: var(--ctt-base-text-weak);
  /* neutral-600 */
  --ctt-loading-description-text-align: center;
  --ctt-loading-description-max-width-small: 250px;
  --ctt-loading-description-max-width-medium: 300px;
  --ctt-loading-description-max-width-large: 400px;
  --ctt-loading-description-margin: 0;

  /* ========================================================================
     LOADING - ANIMATION
     ======================================================================== */
  --ctt-loading-animation-duration-spin: 1s;
  --ctt-loading-animation-timing-spin: linear;
  --ctt-loading-animation-duration-pulse: 2s;
  --ctt-loading-animation-timing-pulse: ease-in-out;
  --ctt-loading-animation-pulse-opacity-from: 0.5;
  --ctt-loading-animation-pulse-opacity-to: 1;

  /* ========================================================================
     LOADING - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-loading-mobile-description-max-width-default: 280px;
  --ctt-loading-mobile-description-max-width-large: 320px;
  --ctt-loading-mobile-description-font-size-default: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-loading-mobile-description-font-size-large: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-loading-mobile-content-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-loading-mobile-counter-min-width: 36px;
  --ctt-loading-mobile-counter-height: 36px;
  --ctt-loading-mobile-breakpoint: 768px;

  /* ========================================================================
     LOADING - ACCESSIBILITY
     ======================================================================== */
  --ctt-loading-high-contrast-spinner-color: ButtonText;
  --ctt-loading-high-contrast-text-color: ButtonText;
  --ctt-loading-high-contrast-counter-bg: ButtonFace;
  --ctt-loading-high-contrast-counter-border: ButtonText;

  /* ========================================================================
     PAGINATION - CONTAINER
     ======================================================================== */
  --ctt-pagination-padding: var(--ctt-core-space-2);
  /* 8px */
  --ctt-pagination-gap: var(--ctt-core-space-4);
  /* 16px */
  --ctt-pagination-font-family: var(--ctt-core-font-family-sans);
  --ctt-pagination-color: var(--ctt-base-text-main);

  /* ========================================================================
     PAGINATION - ITEMS PER PAGE SECTION
     ======================================================================== */
  --ctt-pagination-items-per-page-gap: var(--ctt-core-space-2);
  /* 8px */

  /* ========================================================================
     PAGINATION - LABEL (Typography)
     ======================================================================== */
  --ctt-pagination-label-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-pagination-label-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-pagination-label-color: var(--ctt-base-text-main);

  /* ========================================================================
     PAGINATION - INFO SECTION
     ======================================================================== */
  --ctt-pagination-info-gap: var(--ctt-core-space-4);
  /* 16px */
  --ctt-pagination-info-text-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-pagination-info-text-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-pagination-info-text-color: var(--ctt-base-text-weak);

  /* ========================================================================
     PAGINATION - NAVIGATION SECTION
     ======================================================================== */
  --ctt-pagination-navigation-gap: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     PAGINATION - ELLIPSIS
     ======================================================================== */
  --ctt-pagination-ellipsis-padding-vertical: var(--ctt-core-space-1);
  /* 4px */
  --ctt-pagination-ellipsis-padding-horizontal: var(--ctt-core-space-2);
  /* 8px */
  --ctt-pagination-ellipsis-color: var(--ctt-base-text-weak);
  --ctt-pagination-ellipsis-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-pagination-ellipsis-min-width: 32px;
  --ctt-pagination-ellipsis-height: 32px;

  /* ========================================================================
     PAGINATION - RESPONSIVE (Tablet)
     ======================================================================== */
  --ctt-pagination-tablet-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-pagination-tablet-info-gap: var(--ctt-core-space-2);
  /* 8px */
  --ctt-pagination-tablet-breakpoint: 768px;

  /* ========================================================================
     PAGINATION - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-pagination-mobile-padding: var(--ctt-core-space-1);
  /* 4px */
  --ctt-pagination-mobile-label-font-size: var(--ctt-core-font-size-xs);
  /* 12px */
  --ctt-pagination-mobile-info-font-size: var(--ctt-core-font-size-xs);
  /* 12px */
  --ctt-pagination-mobile-navigation-gap: var(--ctt-core-space-1);
  /* 4px - adjusted from 2px */
  --ctt-pagination-mobile-ellipsis-padding-vertical: var(--ctt-core-space-1);
  /* 4px - adjusted from 2px */
  --ctt-pagination-mobile-ellipsis-padding-horizontal: var(--ctt-core-space-1);
  /* 4px */
  --ctt-pagination-mobile-ellipsis-min-width: 28px;
  --ctt-pagination-mobile-ellipsis-height: 28px;
  --ctt-pagination-mobile-breakpoint: 480px;

  /* ========================================================================
     PAGINATION - LOADING STATE
     ======================================================================== */
  --ctt-pagination-loading-opacity: 0.6;
  --ctt-pagination-loading-cursor: wait;

  /* ========================================================================
     PAGINATION - EMPTY STATE
     ======================================================================== */
  --ctt-pagination-empty-opacity: 0.5;

  /* ========================================================================
     PAGINATION - ACCESSIBILITY
     ======================================================================== */
  --ctt-pagination-high-contrast-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-pagination-high-contrast-border-color: ButtonText;
  --ctt-pagination-high-contrast-ellipsis-color: ButtonText;

  /* ========================================================================
     PHONE INPUT - CONTAINER
     ======================================================================== */
  --ctt-phone-input-font-family: var(--ctt-core-font-family-sans);
  --ctt-phone-input-display: block;
  --ctt-phone-input-width: 100%;

  /* ========================================================================
     PHONE INPUT - LABEL
     ======================================================================== */
  --ctt-phone-input-label-display: block;
  --ctt-phone-input-label-margin-bottom: var(--ctt-core-space-1);
  /* 8px */
  --ctt-phone-input-label-color: var(--ctt-base-text-main);
  --ctt-phone-input-label-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-phone-input-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-phone-input-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 20px */
  --ctt-phone-input-required-color: var(--ctt-base-text-negative);
  --ctt-phone-input-required-margin-left: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     PHONE INPUT - WRAPPER (Combined country + input)
     ======================================================================== */
  --ctt-phone-input-wrapper-display: flex;
  --ctt-phone-input-wrapper-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-phone-input-wrapper-border-style: solid;
  --ctt-phone-input-wrapper-border-color: var(--ctt-base-border-default);
  --ctt-phone-input-wrapper-border-radius: var(--ctt-core-radius-xs);
  /* 4px */
  --ctt-phone-input-wrapper-bg: var(--ctt-core-color-basic-white);
  --ctt-phone-input-wrapper-border-color-hover: var(--ctt-base-border-hover);
  --ctt-phone-input-wrapper-border-color-focus: var(--ctt-base-border-strong);

  /* ========================================================================
     PHONE INPUT - COUNTRY SELECTOR BUTTON
     ======================================================================== */
  --ctt-phone-input-country-trigger-display: flex;
  --ctt-phone-input-country-trigger-align-items: center;
  --ctt-phone-input-country-trigger-gap: var(--ctt-core-space-2);
  /* 8px */
  --ctt-phone-input-country-trigger-padding-block: var(--ctt-core-space-2);
  /* 8px */
  --ctt-phone-input-country-trigger-padding-inline: var(--ctt-core-space-3);
  /* 12px */
  --ctt-phone-input-country-trigger-border-right-width: var(--ctt-core-border-width-hairline);
  --ctt-phone-input-country-trigger-border-right-color: var(--ctt-base-border-default);
  --ctt-phone-input-country-trigger-bg: transparent;
  --ctt-phone-input-country-trigger-bg-hover: var(--ctt-base-surface-hover);
  --ctt-phone-input-country-trigger-color: var(--ctt-base-text-main);
  --ctt-phone-input-country-trigger-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-phone-input-country-trigger-min-width: 110px;
  --ctt-phone-input-country-trigger-height-s: var(--ctt-core-space-10);
  /* 40px */
  --ctt-phone-input-country-trigger-height-m: var(--ctt-core-space-12);
  /* 48px */
  --ctt-phone-input-country-trigger-height-l: var(--ctt-core-space-14);
  /* 56px */

  /* ========================================================================
     PHONE INPUT - COUNTRY DISPLAY (Fixed, non-interactive)
     ======================================================================== */
  --ctt-phone-input-country-display-gap: var(--ctt-core-space-2);
  --ctt-phone-input-country-display-padding-block: var(--ctt-core-space-2);
  --ctt-phone-input-country-display-padding-inline: var(--ctt-core-space-3);

  /* ========================================================================
     PHONE INPUT - FLAG
     ======================================================================== */
  --ctt-phone-input-flag-width: var(--ctt-core-space-6);
  /* 24px */
  --ctt-phone-input-flag-height: var(--ctt-core-space-4);
  /* 16px */
  --ctt-phone-input-flag-border-radius: var(--ctt-core-radius-2xs);
  /* 2px */
  --ctt-phone-input-flag-width-s: var(--ctt-core-space-4);
  /* 16px */
  --ctt-phone-input-flag-height-s: var(--ctt-core-space-3);
  /* 12px */
  --ctt-phone-input-flag-width-l: 28px;
  --ctt-phone-input-flag-height-l: 21px;

  /* ========================================================================
     PHONE INPUT - DIAL CODE
     ======================================================================== */
  --ctt-phone-input-dial-code-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-phone-input-dial-code-color: var(--ctt-base-text-main);

  /* ========================================================================
     PHONE INPUT - CHEVRON ICON
     ======================================================================== */
  --ctt-phone-input-chevron-color: var(--ctt-base-text-main);
  --ctt-phone-input-chevron-transform-open: rotate(180deg);

  /* ========================================================================
     PHONE INPUT - NUMBER INPUT
     ======================================================================== */
  --ctt-phone-input-number-input-flex: 1;
  --ctt-phone-input-number-input-padding-block: var(--ctt-core-space-2);
  /* 8px */
  --ctt-phone-input-number-input-padding-inline: var(--ctt-core-space-3);
  /* 12px */
  --ctt-phone-input-number-input-color: var(--ctt-base-text-strong);
  --ctt-phone-input-number-input-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-phone-input-number-input-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */
  --ctt-phone-input-number-input-height-s: var(--ctt-core-size-control-m);
  /* 40px */
  --ctt-phone-input-number-input-height-m: var(--ctt-core-size-control-xl);
  /* 48px */
  --ctt-phone-input-number-input-height-l: var(--ctt-core-size-control-2xl);
  /* 56px */
  --ctt-phone-input-number-input-placeholder-color: var(--ctt-base-text-placeholder);

  /* ========================================================================
     PHONE INPUT - DROPDOWN
     ======================================================================== */
  --ctt-phone-input-dropdown-z-index: var(--ctt-base-z-index-dropdown);
  --ctt-phone-input-dropdown-margin-top: var(--ctt-core-space-1);
  /* 4px */
  --ctt-phone-input-dropdown-border-width: var(--ctt-core-border-width-hairline);
  --ctt-phone-input-dropdown-border-color: var(--ctt-base-border-default);
  --ctt-phone-input-dropdown-border-radius: var(--ctt-core-radius-xs);
  /* 4px */
  --ctt-phone-input-dropdown-bg: var(--ctt-core-color-basic-white);
  --ctt-phone-input-dropdown-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --ctt-phone-input-dropdown-max-height: 300px;
  --ctt-phone-input-dropdown-max-height-mobile: 250px;

  /* ========================================================================
     PHONE INPUT - SEARCH INPUT
     ======================================================================== */
  --ctt-phone-input-search-wrapper-padding: var(--ctt-core-space-2);
  /* 8px */
  --ctt-phone-input-search-wrapper-border-bottom-width: var(--ctt-core-border-width-hairline);
  --ctt-phone-input-search-wrapper-border-bottom-color: var(--ctt-core-color-neutral-300);
  --ctt-phone-input-search-padding-block: var(--ctt-input-text-padding-vertical-s);
  /* 6px */
  --ctt-phone-input-search-padding-inline: var(--ctt-input-text-padding-horizontal-s);
  /* 10px */
  --ctt-phone-input-search-border-width: var(--ctt-core-border-width-hairline);
  --ctt-phone-input-search-border-color: var(--ctt-input-text-input-border-default);
  --ctt-phone-input-search-border-radius: var(--ctt-core-radius-xs);
  --ctt-phone-input-search-bg: var(--ctt-input-text-input-bg-default);
  --ctt-phone-input-search-color: var(--ctt-input-text-input-color-default);
  --ctt-phone-input-search-font-size: var(--ctt-input-text-input-font-size-s);
  /* 13px */
  --ctt-phone-input-search-border-color-focus: var(--ctt-input-text-input-border-focus);
  --ctt-phone-input-search-placeholder-color: var(--ctt-input-text-placeholder-color);

  /* ========================================================================
     PHONE INPUT - OPTIONS LIST
     ======================================================================== */
  --ctt-phone-input-options-max-height: 240px;
  --ctt-phone-input-options-max-height-mobile: 190px;

  /* ========================================================================
     PHONE INPUT - OPTION ITEM
     ======================================================================== */
  --ctt-phone-input-option-display: flex;
  --ctt-phone-input-option-align-items: center;
  --ctt-phone-input-option-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-phone-input-option-padding: var(--ctt-core-space-3);
  /* 12px */
  --ctt-phone-input-option-border-bottom-width: var(--ctt-core-border-width-hairline);
  --ctt-phone-input-option-border-bottom-color: var(--ctt-core-color-neutral-300);
  --ctt-phone-input-option-bg: transparent;
  --ctt-phone-input-option-bg-hover: var(--ctt-core-color-neutral-200);
  --ctt-phone-input-option-color: var(--ctt-base-text-main);
  --ctt-phone-input-option-font-size: var(--ctt-core-font-size-base);
  /* 16px */
  --ctt-phone-input-option-bg-selected: var(--ctt-base-surface-primary);
  --ctt-phone-input-option-color-selected: var(--ctt-core-color-basic-white);
  --ctt-phone-input-option-bg-selected-hover: var(--ctt-core-color-primary-500);
  --ctt-phone-input-option-padding-s: var(--ctt-core-space-2);
  /* 8px */
  --ctt-phone-input-option-padding-l: var(--ctt-core-space-4);
  /* 16px */
  --ctt-phone-input-option-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-phone-input-option-font-size-l: var(--ctt-core-font-size-base);
  /* 16px */

  /* ========================================================================
     PHONE INPUT - OPTION FLAG
     ======================================================================== */
  --ctt-phone-input-option-flag-width: var(--ctt-core-space-9);
  /* 36px */
  --ctt-phone-input-option-flag-height: 28px;
  --ctt-phone-input-option-flag-width-s: var(--ctt-core-space-6);
  /* 24px */
  --ctt-phone-input-option-flag-height-s: 15px;
  --ctt-phone-input-option-flag-width-l: var(--ctt-core-space-12);
  /* 48px */
  --ctt-phone-input-option-flag-height-l: var(--ctt-core-space-9);
  /* 36px */

  /* ========================================================================
     PHONE INPUT - OPTION CONTENT
     ======================================================================== */
  --ctt-phone-input-option-content-gap: var(--ctt-core-space-1);
  /* 4px */
  --ctt-phone-input-option-content-gap-l: var(--ctt-core-space-2);
  /* 8px */
  --ctt-phone-input-option-name-font-weight: var(--ctt-core-font-weight-book);
  --ctt-phone-input-option-name-line-height: var(--ctt-core-line-height-body-sm);
  --ctt-phone-input-option-dial-code-font-size: var(--ctt-core-font-size-sm);
  --ctt-phone-input-option-dial-code-color: var(--ctt-base-text-main);
  --ctt-phone-input-option-dial-code-color-selected: var(--ctt-core-color-neutral-200);
  --ctt-phone-input-option-dial-code-font-size-l: var(--ctt-core-font-size-base);

  /* ========================================================================
     PHONE INPUT - NO RESULTS
     ======================================================================== */
  --ctt-phone-input-no-results-padding: var(--ctt-core-space-3);
  --ctt-phone-input-no-results-color: var(--ctt-base-text-main);
  --ctt-phone-input-no-results-font-size: var(--ctt-core-font-size-sm);

  /* ========================================================================
     PHONE INPUT - ERROR STATE
     ======================================================================== */
  --ctt-phone-input-error-border-color: var(--ctt-base-input-border-error);
  --ctt-phone-input-error-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-phone-input-error-message-display: flex;
  --ctt-phone-input-error-message-gap: var(--ctt-core-space-1);
  --ctt-phone-input-error-message-margin-top: var(--ctt-core-space-1);
  --ctt-phone-input-error-message-color: var(--ctt-base-on-error-fg);
  --ctt-phone-input-error-message-font-size: var(--ctt-core-font-size-sm);
  --ctt-phone-input-error-message-line-height: var(--ctt-core-line-height-body-sm);
  --ctt-phone-input-error-icon-size: var(--ctt-core-space-4);
  /* 16px */

  /* ========================================================================
     PHONE INPUT - DISABLED STATE
     ======================================================================== */
  --ctt-phone-input-disabled-wrapper-bg: var(--ctt-base-surface-disabled);
  --ctt-phone-input-disabled-wrapper-border-color: var(--ctt-base-border-disabled);
  --ctt-phone-input-disabled-label-color: var(--ctt-core-color-neutral-600);
  --ctt-phone-input-disabled-text-color: var(--ctt-base-text-disabled);
  --ctt-phone-input-disabled-placeholder-color: var(--ctt-base-text-disabled);

  /* ========================================================================
     PHONE INPUT - READONLY STATE
     ======================================================================== */
  --ctt-phone-input-readonly-wrapper-bg: var(--ctt-base-surface-disabled);

  /* ========================================================================
     PHONE INPUT - SIZE VARIANTS - SMALL
     ======================================================================== */
  --ctt-phone-input-s-country-trigger-min-width: 90px;
  --ctt-phone-input-s-country-trigger-height: var(--ctt-core-size-control-m);
  /* 40px */
  --ctt-phone-input-s-country-trigger-padding-block: var(--ctt-core-space-1);
  --ctt-phone-input-s-country-trigger-padding-inline: var(--ctt-core-space-2);
  --ctt-phone-input-s-country-trigger-font-size: var(--ctt-core-font-size-sm);
  --ctt-phone-input-s-label-font-size: var(--ctt-core-font-size-sm);
  --ctt-phone-input-s-label-margin-bottom: var(--ctt-core-space-1);
  --ctt-phone-input-s-search-padding-block: var(--ctt-core-space-1);
  --ctt-phone-input-s-search-padding-inline: var(--ctt-core-space-2);

  /* ========================================================================
     PHONE INPUT - SIZE VARIANTS - LARGE
     ======================================================================== */
  --ctt-phone-input-l-country-trigger-min-width: 130px;
  --ctt-phone-input-l-country-trigger-height: var(--ctt-core-size-control-2xl);
  /* 56px */
  --ctt-phone-input-l-country-trigger-padding-block: var(--ctt-core-space-3);
  --ctt-phone-input-l-country-trigger-padding-inline: var(--ctt-core-space-4);
  --ctt-phone-input-l-country-trigger-font-size: var(--ctt-core-font-size-lg);
  --ctt-phone-input-l-label-font-size: var(--ctt-core-font-size-md);
  --ctt-phone-input-l-label-margin-bottom: var(--ctt-core-space-1);
  --ctt-phone-input-l-search-padding-block: var(--ctt-core-space-2);
  --ctt-phone-input-l-search-padding-inline: var(--ctt-core-space-3);

  /* ========================================================================
     PHONE INPUT - RESPONSIVE (TABLET ≤768px)
     ======================================================================== */
  --ctt-phone-input-tablet-country-trigger-min-width: 90px;
  --ctt-phone-input-tablet-country-trigger-padding: var(--ctt-core-space-2);
  --ctt-phone-input-tablet-number-input-font-size: var(--ctt-core-font-size-base);
  /* 16px - Prevent iOS zoom */

  /* ========================================================================
     PHONE INPUT - ACCESSIBILITY
     ======================================================================== */
  --ctt-phone-input-high-contrast-wrapper-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-phone-input-high-contrast-error-border-width: var(--ctt-core-border-width-thick);
  /* 3px */
  --ctt-phone-input-high-contrast-dropdown-border-width: var(--ctt-core-border-width-thin);

  /* ========================================================================
     MODAL - STRUCTURE
     ======================================================================== */
  --ctt-modal-z-index: var(--ctt-base-z-index-modal);

  /* ========================================================================
     MODAL - OVERLAY
     ======================================================================== */
  --ctt-modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --ctt-modal-overlay-padding: var(--ctt-core-space-6);
  /* 24px */

  /* ========================================================================
     MODAL - DIALOG (Container)
     ======================================================================== */

  --ctt-modal-dialog-bg: var(--ctt-core-color-basic-white);
  --ctt-modal-dialog-border-radius: var(--ctt-core-radius-md);
  /* 12px */
  --ctt-modal-dialog-box-shadow: var(--ctt-core-shadow-lg);
  --ctt-modal-dialog-max-height: 90vh;
  --ctt-modal-overlay-padding-full-screen: 20px;

  /* ========================================================================
     MODAL - DIALOG SIZES
     ======================================================================== */
  --ctt-modal-dialog-max-width-small: 400px;
  --ctt-modal-dialog-max-width-medium: 600px;
  --ctt-modal-dialog-max-width-large: 800px;
  --ctt-modal-dialog-max-width-full-screen: 100%;
  --ctt-modal-dialog-height-full-screen: 100%;

  /* ========================================================================
     MODAL - HEADER
     ======================================================================== */
  --ctt-modal-header-gap: var(--ctt-core-space-4);
  /* 16px */
  --ctt-modal-header-padding-top: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-header-padding-horizontal: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-header-padding-bottom: var(--ctt-core-space-4);
  /* 16px */
  --ctt-modal-header-padding: var(--ctt-modal-header-padding-top) var(--ctt-modal-header-padding-horizontal) var(--ctt-modal-header-padding-bottom) var(--ctt-modal-header-padding-horizontal);
  --ctt-modal-header-border-width: var(--ctt-core-border-width-none);
  /* 0px */
  --ctt-modal-header-border-color: var(--ctt-base-border-default);

  /* ========================================================================
     MODAL - EYEBROW (Optional label above title)
     ======================================================================== */
  --ctt-modal-eyebrow-font-family: var(--ctt-core-font-family-sans);
  --ctt-modal-eyebrow-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-modal-eyebrow-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-modal-eyebrow-line-height: var(--ctt-core-line-height-body-sm);
  /* 20px */
  --ctt-modal-eyebrow-color: var(--ctt-base-text-weak);
  --ctt-modal-eyebrow-margin: 0;

  /* ========================================================================
     MODAL - TITLE
     ======================================================================== */
  --ctt-modal-title-font-family: var(--ctt-core-font-family-sans);
  --ctt-modal-title-font-size: var(--ctt-core-font-size-xl);
  /* 20px */
  --ctt-modal-title-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-modal-title-line-height: var(--ctt-core-line-height-body-sm);
  /* 20px */
  --ctt-modal-title-color: var(--ctt-base-text-main);
  --ctt-modal-title-min-height: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-title-margin: 0;

  /* ========================================================================
     MODAL - CLOSE BUTTON
     ======================================================================== */
  --ctt-modal-close-width: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-close-height: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-close-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-modal-close-color: var(--ctt-base-text-weak);
  --ctt-modal-close-border-radius: var(--ctt-core-radius-xs);
  /* 4px */
  --ctt-modal-close-transition-duration: var(--ctt-base-motion-duration-transition);
  --ctt-modal-close-transition-timing: var(--ctt-base-motion-easing-default);
  --ctt-modal-close-position-top: var(--ctt-core-space-4);
  /* 16px */
  --ctt-modal-close-position-right: var(--ctt-core-space-4);
  /* 16px */

  /* ========================================================================
     MODAL - CONTENT
     ======================================================================== */
  --ctt-modal-content-padding: var(--ctt-core-space-0) var(--ctt-core-space-6);
  /* 0 24px */
  --ctt-modal-content-font-family: var(--ctt-core-font-family-sans);
  --ctt-modal-content-font-size: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-modal-content-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-modal-content-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */
  --ctt-modal-content-color: var(--ctt-base-text-weak);

  /* ========================================================================
     MODAL - FOOTER
     ======================================================================== */
  --ctt-modal-footer-gap: var(--ctt-core-space-4);
  /* 16px */
  --ctt-modal-footer-padding-top: var(--ctt-core-space-4);
  /* 16px */
  --ctt-modal-footer-padding-horizontal: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-footer-padding-bottom: var(--ctt-core-space-4);
  /* 16px */
  --ctt-modal-footer-padding: var(--ctt-modal-footer-padding-top) var(--ctt-modal-footer-padding-horizontal);
  --ctt-modal-footer-border-width: var(--ctt-core-border-width-none);
  /* 0px */
  --ctt-modal-footer-border-color: var(--ctt-base-border-default);

  /* ========================================================================
     MODAL - ANIMATION
     ======================================================================== */
  --ctt-modal-animation-duration-fade: 0.2s;
  --ctt-modal-animation-timing-fade: ease-out;
  --ctt-modal-animation-duration-slide: 0.2s;
  --ctt-modal-animation-timing-slide: ease-out;
  --ctt-modal-animation-slide-distance: 20px;

  /* ========================================================================
     MODAL - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-modal-mobile-overlay-padding: var(--ctt-core-space-3);
  /* 12px */
  --ctt-modal-mobile-dialog-max-height: 95vh;
  --ctt-modal-mobile-dialog-border-radius-top: var(--ctt-core-radius-sm);
  /* 8px */
  --ctt-modal-mobile-dialog-border-radius-bottom: 0;
  --ctt-modal-mobile-header-padding: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-mobile-content-padding: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-mobile-footer-padding: var(--ctt-core-space-6);
  /* 24px */
  --ctt-modal-mobile-footer-gap: var(--ctt-core-space-3);
  /* 12px */
  --ctt-modal-mobile-breakpoint: 768px;

  /* ========================================================================
     MODAL - ACCESSIBILITY
     ======================================================================== */
  --ctt-modal-high-contrast-dialog-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-modal-high-contrast-dialog-border-color: var(--ctt-base-text-main);
  --ctt-modal-high-contrast-close-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-modal-high-contrast-close-border-color: var(--ctt-base-text-main);

  /* ========================================================================
     SIDE PANEL - POSITION & LAYOUT
     ======================================================================== */
  --ctt-side-panel-position: fixed;
  --ctt-side-panel-top: 0;
  --ctt-side-panel-right: 0;
  --ctt-side-panel-height: 100vh;
  --ctt-side-panel-width-default: 360px;
  --ctt-side-panel-z-index: var(--ctt-base-z-index-overlay);
  --ctt-side-panel-padding-vertical: var(--ctt-core-space-4);
  /* 16px */
  --ctt-side-panel-padding-horizontal: 0;

  /* ========================================================================
     SIDE PANEL - VISUAL DESIGN
     ======================================================================== */
  --ctt-side-panel-bg: var(--ctt-base-surface-container);
  /* white */
  --ctt-side-panel-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-side-panel-border-color-default: var(--ctt-base-border-default);
  /* neutral-500 */
  --ctt-side-panel-border-color-hover: var(--ctt-base-border-strong);
  /* neutral-700 */
  --ctt-side-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --ctt-side-panel-shadow-mobile: 0 4px 20px rgba(0, 0, 0, 0.3);

  /* ========================================================================
     SIDE PANEL - TRANSITIONS
     ======================================================================== */
  --ctt-side-panel-transition-duration: var(--ctt-base-motion-duration-panel);
  --ctt-side-panel-transition-timing: var(--ctt-base-motion-easing-default);
  --ctt-side-panel-transition-transform: transform var(--ctt-base-motion-duration-panel) var(--ctt-base-motion-easing-default);
  --ctt-side-panel-transition-shadow: box-shadow var(--ctt-base-motion-duration-transition) var(--ctt-base-motion-easing-default);
  --ctt-side-panel-transition-border: border-color var(--ctt-base-motion-duration-transition) var(--ctt-base-motion-easing-default);

  /* ========================================================================
     SIDE PANEL - COLLAPSED STATE
     ======================================================================== */
  --ctt-side-panel-collapsed-transform: translateX(100%);

  /* ========================================================================
     SIDE PANEL - FOCUS STATE
     ======================================================================== */
  --ctt-side-panel-focus-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --ctt-side-panel-focus-ring-width: 2px;
  --ctt-side-panel-focus-ring-color: var(--ctt-core-color-primary-400);
  /* #e63350 */
  --ctt-side-panel-focus-ring-offset: 0;

  /* ========================================================================
     SIDE PANEL - MOBILE RESPONSIVE
     ======================================================================== */
  --ctt-side-panel-mobile-breakpoint: 768px;
  --ctt-side-panel-mobile-width: 100vw;
  --ctt-side-panel-mobile-shadow-extra: -20px 0 40px rgba(0, 0, 0, 0.1);

  /* ========================================================================
     SIDE PANEL - SCROLLBAR
     ======================================================================== */
  --ctt-side-panel-scrollbar-width: 6px;
  --ctt-side-panel-scrollbar-border-radius: 3px;
  --ctt-side-panel-scrollbar-thumb-color: var(--ctt-base-border-default);
  /* neutral-500 */
  --ctt-side-panel-scrollbar-thumb-color-hover: var(--ctt-base-border-strong);
  /* neutral-700 */
  --ctt-side-panel-scrollbar-track-color: transparent;

  /* ========================================================================
     SIDE PANEL - HIGH CONTRAST MODE
     ======================================================================== */
  --ctt-side-panel-high-contrast-border-width: 2px;

  /* ========================================================================
     SIDE PANEL ITEM - CONTAINER
     ======================================================================== */
  --ctt-side-panel-item-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-side-panel-item-border-color: var(--ctt-base-border-default);
  /* neutral-500 */
  --ctt-side-panel-item-padding-vertical: var(--ctt-core-space-2);
  /* 16px */
  --ctt-side-panel-item-padding-r-horizontal: var(--ctt-core-space-3);
  /* 24px */
  --ctt-side-panel-item-padding-l-horizontal: var(--ctt-core-space-4);

  /* ========================================================================
     SIDE PANEL ITEM - HIGH CONTRAST MODE
     ======================================================================== */
  --ctt-side-panel-item-high-contrast-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  /* ========================================================================
     TAG - SPACING
     ======================================================================== */
  --ctt-tag-gap: var(--ctt-core-space-2);
  /* 8px - Gap between icon and label */
  --ctt-tag-padding-vertical-s: var(--ctt-core-space-1);
  /* 4px - Small size */
  --ctt-tag-padding-horizontal-s: var(--ctt-core-space-2);
  /* 8px - Small size */
  --ctt-tag-padding-vertical-m: var(--ctt-core-space-2);
  /* 8px - Medium size (default) */
  --ctt-tag-padding-horizontal-m: var(--ctt-core-space-3);
  /* 12px - Medium size (default) */
  --ctt-tag-padding-vertical-l: var(--ctt-core-space-3);
  /* 12px - Large size */
  --ctt-tag-padding-horizontal-l: var(--ctt-core-space-4);
  /* 16px - Large size */

  /* ========================================================================
     TAG - SHAPE & BORDER
     ======================================================================== */
  --ctt-tag-border-radius: var(--ctt-core-radius-sm);
  /* 8px */
  --ctt-tag-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */

  /* ========================================================================
     TAG - ICON SIZING
     ======================================================================== */
  --ctt-tag-icon-size-s: var(--ctt-core-size-icon-s);
  /* 14px */
  --ctt-tag-icon-size-m: var(--ctt-core-size-icon-m);
  /* 16px */
  --ctt-tag-icon-size-l: var(--ctt-core-size-icon-l);
  /* 18px */

  /* ========================================================================
     TAG - TYPOGRAPHY
     ======================================================================== */
  --ctt-tag-font-family: var(--ctt-core-font-family-sans);
  /* Acto CTT */
  --ctt-tag-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-tag-font-size-s: var(--ctt-core-font-size-xs);
  /* 12px */
  --ctt-tag-font-size-m: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-tag-font-size-l: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-tag-line-height: var(--ctt-core-line-height-body-sm);
  /* 20px */

  /* ========================================================================
     TAG - NEUTRAL (DEFAULT)
     ======================================================================== */
  --ctt-tag-neutral-bg: var(--ctt-base-surface-muted);
  /* Light neutral background */
  --ctt-tag-neutral-border: var(--ctt-core-color-neutral-600);
  /* Neutral border */
  --ctt-tag-neutral-fg: var(--ctt-core-color-neutral-800);
  /* Neutral text */

  /* ========================================================================
     TAG - SUCCESS
     ======================================================================== */
  --ctt-tag-success-bg: var(--ctt-base-surface-success);
  /* semantic-success-50 */
  --ctt-tag-success-border: var(--ctt-base-border-success);
  /* semantic-success-500 */
  --ctt-tag-success-fg: var(--ctt-base-on-success-fg);
  /* semantic-success-700 */

  /* ========================================================================
     TAG - WARNING
     ======================================================================== */
  --ctt-tag-warning-bg: var(--ctt-base-surface-warning);
  /* semantic-warning-50 */
  --ctt-tag-warning-border: var(--ctt-base-border-warning);
  /* semantic-warning-700 */
  --ctt-tag-warning-fg: var(--ctt-base-on-warning-fg);
  /* semantic-warning-700 */

  /* ========================================================================
     TAG - DANGER (ERROR/NEGATIVE)
     ======================================================================== */
  --ctt-tag-danger-bg: var(--ctt-base-surface-error);
  /* semantic-negative-50 */
  --ctt-tag-danger-border: var(--ctt-base-border-error);
  /* semantic-negative-600 */
  --ctt-tag-danger-fg: var(--ctt-base-on-error-fg);
  /* semantic-negative-600 */

  /* ========================================================================
     TAG - INFO (INFORMATIVE)
     ======================================================================== */
  --ctt-tag-info-bg: var(--ctt-base-surface-info);
  /* semantic-informative-50 */
  --ctt-tag-info-border: var(--ctt-core-color-semantic-informative-600);
  /* Informative border */
  --ctt-tag-info-fg: var(--ctt-base-on-info-fg);
  /* semantic-informative-700 */

  /* ========================================================================
     TAG - HIGHLIGHT
     ======================================================================== */
  --ctt-tag-highlight-bg: var(--ctt-base-surface-highlight);
  /* secondary-purple-50 */
  --ctt-tag-highlight-border: var(--ctt-base-border-highlight);
  /* secondary-purple-500 */
  --ctt-tag-highlight-fg: var(--ctt-base-on-highlight-fg);
  /* secondary-purple-600 */

  /* ========================================================================
     TAG - DISABLED STATE
     ======================================================================== */
  --ctt-tag-disabled-bg: var(--ctt-core-color-neutral-200);
  --ctt-tag-disabled-border: var(--ctt-core-color-neutral-400);
  --ctt-tag-disabled-fg: var(--ctt-core-color-neutral-600);
  --ctt-tag-disabled-opacity: 0.6;
  /* ========================================================================
     TEXTAREA INPUT - SPACING
     ======================================================================== */
  --ctt-textarea-label-margin-bottom: var(--ctt-core-space-1);
  /* 8px - Space below label */
  --ctt-textarea-required-margin-left: var(--ctt-core-space-1);
  /* 4px - Space before required indicator */
  --ctt-textarea-helper-margin-top: var(--ctt-core-space-1);
  /* 4px - Space above helper/count/error text */
  --ctt-textarea-error-gap: var(--ctt-core-space-1);
  /* 4px - Gap between error icon and text */

  /* Small size variant spacing */
  --ctt-textarea-padding-vertical-s: 6px;
  /* calc(8px - 2px) for small */
  --ctt-textarea-padding-horizontal-s: 10px;
  /* calc(12px - 2px) for small */
  --ctt-textarea-min-height-s: 40px;
  /* calc(16px * 2.5) */

  /* Medium size variant spacing (default) */
  --ctt-textarea-padding-vertical-m: var(--ctt-core-space-3);
  /* 12px */
  --ctt-textarea-padding-horizontal-m: var(--ctt-core-space-4);
  /* 16px */
  --ctt-textarea-min-height-m: 48px;
  /* Default min height */

  /* Large size variant spacing */
  --ctt-textarea-padding-vertical-l: var(--ctt-core-space-3);
  /* 12px */
  --ctt-textarea-padding-horizontal-l: var(--ctt-core-space-4);
  /* 16px */
  --ctt-textarea-min-height-l: 56px;
  /* calc(16px * 3.5) */

  /* Auto-resize constraints */
  --ctt-textarea-auto-resize-max-height: 192px;
  /* calc(16px * 12) */

  /* ========================================================================
     TEXTAREA INPUT - BORDER & SHAPE
     ======================================================================== */
  --ctt-textarea-border-width: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-textarea-border-width-high-contrast: var(--ctt-core-border-width-thin);
  /* 2px for high contrast mode */
  --ctt-textarea-border-radius-xs: var(--ctt-core-radius-xs);
  /* 4px - Small size */
  --ctt-textarea-border-radius-s: var(--ctt-core-radius-xs);
  /* 8px - Medium/Large size */

  /* ========================================================================
     TEXTAREA INPUT - TYPOGRAPHY - LABEL
     ======================================================================== */
  --ctt-textarea-label-font-family: var(--ctt-core-font-family-sans);
  /* Acto CTT */
  --ctt-textarea-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 12px - Small/Medium */
  --ctt-textarea-label-font-size-m: var(--ctt-core-font-size-sm);
  /* 14px - Large */
  --ctt-textarea-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-textarea-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 20px */

  /* ========================================================================
     TEXTAREA INPUT - TYPOGRAPHY - CONTROL
     ======================================================================== */
  --ctt-textarea-control-font-family: var(--ctt-core-font-family-sans);
  /* Acto CTT */
  --ctt-textarea-control-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px - Small */
  --ctt-textarea-control-font-size-m: var(--ctt-core-font-size-md);
  /* 16px - Medium */
  --ctt-textarea-control-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px - Large */
  --ctt-textarea-control-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-textarea-control-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */

  /* ========================================================================
     TEXTAREA INPUT - TYPOGRAPHY - HELPER/COUNT/ERROR
     ======================================================================== */
  --ctt-textarea-helper-font-size-s: var(--ctt-core-font-size-xs);
  /* 12px - Small (scaled-75) */
  --ctt-textarea-helper-font-size-m: var(--ctt-core-font-size-sm);
  /* 12px - Medium */
  --ctt-textarea-helper-font-size-l: var(--ctt-core-font-size-sm);
  /* 14px - Large */
  --ctt-textarea-helper-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */
  --ctt-textarea-helper-line-height: var(--ctt-core-line-height-body-sm);
  /* 20px */

  /* ========================================================================
     TEXTAREA INPUT - TYPOGRAPHY - REQUIRED INDICATOR
     ======================================================================== */
  --ctt-textarea-required-font-weight: var(--ctt-core-font-weight-bold);
  /* 700 */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - DEFAULT STATE
     ======================================================================== */
  --ctt-textarea-label-fg: var(--ctt-base-text-main);
  /* Label text color */
  --ctt-textarea-control-bg: var(--ctt-base-input-bg-default);
  /* Background */
  --ctt-textarea-control-border: var(--ctt-base-input-border-default);
  /* Border color */
  --ctt-textarea-control-fg: var(--ctt-base-input-fg-default);
  /* Text color */
  --ctt-textarea-placeholder-fg: var(--ctt-base-input-fg-placeholder);
  /* Placeholder color */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - HOVER STATE
     ======================================================================== */
  --ctt-textarea-control-border-hover: var(--ctt-base-border-hover);
  /* Hover border */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - FOCUS STATE
     ======================================================================== */
  --ctt-textarea-control-border-focus: var(--ctt-base-input-border-hover);
  /* Focus border */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - DISABLED STATE
     ======================================================================== */
  --ctt-textarea-disabled-label-fg: var(--ctt-base-text-main);
  /* Disabled label */
  --ctt-textarea-disabled-control-bg: var(--ctt-base-input-bg-disabled);
  /* Disabled background */
  --ctt-textarea-disabled-control-border: var(--ctt-base-input-border-disabled);
  /* Disabled border */
  --ctt-textarea-disabled-control-fg: var(--ctt-base-input-fg-disabled);
  /* Disabled text */
  --ctt-textarea-disabled-placeholder-fg: var(--ctt-base-input-fg-disabled);
  /* Disabled placeholder */
  --ctt-textarea-disabled-opacity: 0.6;
  /* Overall opacity for disabled state */
  --ctt-textarea-disabled-placeholder-opacity: 0.6;
  /* Placeholder opacity when disabled */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - READONLY STATE
     ======================================================================== */
  --ctt-textarea-readonly-control-bg: var(--ctt-base-input-bg-disabled);
  /* Readonly background */
  --ctt-textarea-readonly-control-border: var(--ctt-base-input-border-disabled);
  /* Readonly border */
  --ctt-textarea-readonly-control-fg: var(--ctt-base-input-fg-default);
  /* Readonly text */
  --ctt-textarea-readonly-placeholder-fg: var(--ctt-base-input-fg-disabled);
  /* Readonly placeholder */
  --ctt-textarea-readonly-placeholder-opacity: 0.8;
  /* Placeholder opacity when readonly */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - ERROR STATE
     ======================================================================== */
  --ctt-textarea-error-border: var(--ctt-base-input-border-error);
  /* Error border */
  --ctt-textarea-error-fg: var(--ctt-base-on-error-fg);
  /* Error text color */
  --ctt-textarea-error-shadow: 0 0 0 2px rgba(177, 0, 24, 0.2);
  /* Error focus shadow */

  /* ========================================================================
     TEXTAREA INPUT - COLORS - HELPER/COUNT TEXT
     ======================================================================== */
  --ctt-textarea-helper-fg: var(--ctt-base-text-tertiary);
  /* Helper/count text color */
  --ctt-textarea-count-fg: var(--ctt-base-text-tertiary);
  /* Character count color */

  /* ========================================================================
     TEXTAREA INPUT - REQUIRED INDICATOR
     ======================================================================== */
  --ctt-textarea-required-fg: var(--ctt-base-on-error-fg);
  /* Required asterisk color */

  /* ========================================================================
     TEXTAREA INPUT - ERROR ICON
     ======================================================================== */
  --ctt-textarea-error-icon-size: 16px;
  /* Error icon dimensions */

  /* ========================================================================
     TEXTAREA INPUT - TRANSITIONS & EFFECTS
     ======================================================================== */
  --ctt-textarea-transition-duration: 0.15s;
  /* Transition timing */
  --ctt-textarea-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* Easing function */
  --ctt-textarea-label-transition-duration: 0.2s;
  /* Label color transition */
  --ctt-textarea-focus-outline-offset: 2px;
  /* Focus outline offset in high contrast mode */

  /* ========================================================================
     ERROR PAGE - LAYOUT
     ======================================================================== */
  --ctt-error-page-min-height: 400px;
  /* Desktop minimum container height */
  --ctt-error-page-min-height-mobile: 300px;
  /* Mobile minimum container height */
  --ctt-error-page-content-max-width: 420px;
  /* Text content max width */
  --ctt-error-page-image-max-width: 580px;
  /* Illustration max width */

  /* ========================================================================
     TOASTER ALERT - SPACING
     ======================================================================== */
  --ctt-toaster-padding: var(--ctt-core-space-4);
  /* Base padding (16px) */
  --ctt-toaster-container-gap: var(--ctt-core-space-3);
  /* Main gap between content area and close action (12px) */
  --ctt-toaster-content-gap: var(--ctt-core-space-2);
  /* Internal content gap for headline/message grouping (8px) */
  /* Reserved token (currently not consumed internally). */
  --ctt-toaster-icon-margin-right: var(--ctt-core-space-4);
  /* 16px */
  /* Reserved token (currently not consumed internally). */
  --ctt-toaster-alert-margin-vertical: var(--ctt-core-space-4);
  /* 16px */
  --ctt-toaster-position-offset: var(--ctt-core-space-5);
  /* Toaster edge offset (20px) */
  --ctt-toaster-position-offset-mobile: var(--ctt-core-space-2);
  /* Mobile edge offset (8px) */
  /* Reserved token (currently not consumed internally). */
  --ctt-toaster-close-button-top: var(--ctt-core-space-2);
  /* 8px */
  /* Reserved token (currently not consumed internally). */
  --ctt-toaster-close-button-right: var(--ctt-core-space-2);
  /* 8px */

  /* ========================================================================
     TOASTER ALERT - BORDER & SHAPE
     ======================================================================== */
  --ctt-toaster-border-radius: var(--ctt-core-radius-sm);
  /* Container border radius (8px) */
  /* Reserved token (currently not consumed internally). */
  --ctt-toaster-border-width: var(--ctt-core-border-width-thick);
  /* 3px */
  /* Reserved token (currently not consumed internally). */
  --ctt-toaster-border-left-width: 4px;
  /* 4px */

  /* ========================================================================
     TOASTER ALERT - TYPOGRAPHY - CONTAINER
     ======================================================================== */
  --ctt-toaster-font-family: var(--ctt-core-font-family-sans);
  /* Base font family */
  --ctt-toaster-text-color: var(--ctt-base-text-main);
  /* Default text color */

  /* ========================================================================
     TOASTER ALERT - TYPOGRAPHY - HEADLINE
     ======================================================================== */
  --ctt-toaster-headline-font-size: var(--ctt-core-font-size-sm);
  /* Headline font size (14px) */
  --ctt-toaster-headline-font-weight: var(--ctt-core-font-weight-medium);
  /* Headline font weight (500) */
  --ctt-toaster-headline-line-height: var(--ctt-core-line-height-body-lg);
  /* Headline line height (26px) */

  /* ========================================================================
     TOASTER ALERT - TYPOGRAPHY - MESSAGE
     ======================================================================== */
  --ctt-toaster-message-font-size: var(--ctt-core-font-size-xs);
  /* Message font size (12px) */

  /* ========================================================================
     TOASTER ALERT - TYPOGRAPHY - CLOSE BUTTON
     ======================================================================== */
  --ctt-toaster-close-button-font-size: var(--ctt-core-font-size-lg);
  /* Close button icon size (18px) */
  --ctt-toaster-close-button-color: var(--ctt-base-text-tertiary);
  /* Close button color */

  /* ========================================================================
     TOASTER ALERT - COLORS - INFO VARIANT
     ======================================================================== */
  --ctt-toaster-info-bg: var(--ctt-base-color-feedback-info-bg-light);
  /* Info background */
  --ctt-toaster-info-border: var(--ctt-base-color-feedback-info-bg-main);
  /* Info border */

  /* ========================================================================
     TOASTER ALERT - COLORS - WARNING VARIANT
     ======================================================================== */
  --ctt-toaster-warning-bg: var(--ctt-base-color-feedback-warning-bg-light);
  /* Warning background */
  --ctt-toaster-warning-border: var(--ctt-base-color-feedback-warning-bg-main);
  /* Warning border */

  /* ========================================================================
     TOASTER ALERT - COLORS - ERROR VARIANT
     ======================================================================== */
  --ctt-toaster-error-bg: var(--ctt-base-color-feedback-negative-bg-light);
  /* Error background */
  --ctt-toaster-error-border: var(--ctt-base-color-feedback-negative-bg-main);
  /* Error border */

  /* ========================================================================
     TOASTER ALERT - COLORS - SUCCESS VARIANT
     ======================================================================== */
  --ctt-toaster-success-bg: var(--ctt-base-color-feedback-success-bg-light);
  /* Success background */
  --ctt-toaster-success-border: var(--ctt-base-color-feedback-success-bg-main);
  /* Success border */

  /* ========================================================================
     TOASTER ALERT - COLORS - HIGHLIGHT VARIANT
     ======================================================================== */
  --ctt-toaster-highlight-bg: var(--ctt-base-color-feedback-highlight-bg-light);
  /* Highlight background */
  --ctt-toaster-highlight-border: var(--ctt-base-color-feedback-highlight-bg-main);
  /* Highlight border */

  /* ========================================================================
     TOASTER ALERT - SHADOW
     ======================================================================== */
  --ctt-toaster-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Container shadow */

  /* ========================================================================
     TOASTER ALERT - LAYOUT - WIDTHS
     ======================================================================== */
  --ctt-toaster-alert-width-auto: auto;
  /* Alert type default width */
  --ctt-toaster-alert-max-width: 600px;
  /* Alert type max width */
  --ctt-toaster-toaster-width: 320px;
  /* Toaster type default width */
  --ctt-toaster-toaster-max-width-mobile: 90vw;
  /* Toaster mobile max width */

  /* ========================================================================
     TOASTER ALERT - LAYOUT - Z-INDEX
     ======================================================================== */
  --ctt-toaster-z-index: var(--ctt-base-z-index-toast);
  /* Toaster overlay z-index */

  /* ========================================================================
     TOASTER ALERT - ANIMATION
     ======================================================================== */
  --ctt-toaster-animation-duration: var(--ctt-base-motion-duration-panel);
  /* Slide-in animation duration */
  --ctt-toaster-animation-timing: var(--ctt-base-motion-easing-out);
  /* Animation easing function */
  --ctt-toaster-transition-duration: var(--ctt-base-motion-duration-panel);
  /* Position transition duration */
  --ctt-toaster-transition-timing: var(--ctt-base-motion-easing-out);
  /* Position transition easing */

  /* ========================================================================
     TOASTER ALERT - STACKING (for multiple toasters)
     ======================================================================== */
  --ctt-toaster-stack-height: 80px;
  /* Height + gap for stacking calculation */
  --ctt-toaster-stack-base-offset: 20px;
  /* Base offset from viewport edge */

  /* ========================================================================
     TOASTER ALERT - ICON
     ======================================================================== */
  --ctt-toaster-icon-size: 24px;
  /* Variant icon size */
  --ctt-toaster-close-icon-size: 16px;
  /* Close button icon size */
  /* ========================================================================
     COMPONENT TOKENS - TOGGLESWITCH
     ======================================================================== */

  /* Layout & Spacing */
  --ctt-toggle-gap: var(--ctt-core-space-2);
  /* 8px - Gap between thumb and label */
  --ctt-toggle-gap-mobile: var(--ctt-core-space-2);
  /* 8px - Gap on mobile devices */

  /* Track Dimensions */
  --ctt-toggle-track-width: 64px;
  /* Track width */
  --ctt-toggle-track-height: var(--ctt-core-size-control-m);
  /* 32px - Track height */
  --ctt-toggle-track-border-radius: var(--ctt-core-radius-pill);
  /* 999px - Pill shape */
  --ctt-toggle-track-border-width: var(--ctt-core-border-width-hairline);
  /* 1px - Track border width */

  /* Thumb Circle */
  --ctt-toggle-thumb-size: var(--ctt-core-size-icon-xl);
  /* 24px - Thumb circle diameter */
  --ctt-toggle-thumb-inset: var(--ctt-core-space-1);
  /* 4px - Distance from track edge */

  /* Colors - Unselected (Default State) */
  --ctt-toggle-unselected-bg: var(--ctt-core-color-neutral-50);
  /* Light gray background */
  --ctt-toggle-unselected-border: var(--ctt-core-color-neutral-600);
  /* Dark gray border */
  --ctt-toggle-unselected-thumb: var(--ctt-core-color-neutral-800);
  /* Dark thumb circle */

  /* Colors - Selected (Checked State) */
  --ctt-toggle-selected-bg: var(--ctt-core-color-primary-500);
  /* Primary red background */
  --ctt-toggle-selected-border: var(--ctt-core-color-primary-500);
  /* Primary red border */
  --ctt-toggle-selected-thumb: var(--ctt-core-color-neutral-100);
  /* Light thumb circle */

  /* Colors - Hover Unselected */
  --ctt-toggle-hover-unselected-bg: var(--ctt-core-color-neutral-100);
  /* Lighter hover background */
  --ctt-toggle-hover-unselected-border: var(--ctt-core-color-neutral-700);
  /* Darker hover border */

  /* Colors - Hover Selected */
  --ctt-toggle-hover-selected-bg: var(--ctt-core-color-primary-600);
  /* Darker primary hover */
  --ctt-toggle-hover-selected-border: var(--ctt-core-color-primary-600);
  /* Darker primary border hover */

  /* Colors - Disabled State */
  --ctt-toggle-disabled-bg: var(--ctt-core-color-neutral-300);
  /* Disabled background */
  --ctt-toggle-disabled-border: var(--ctt-core-color-neutral-400);
  /* Disabled border */
  --ctt-toggle-disabled-thumb: var(--ctt-core-color-neutral-600);
  /* Disabled thumb */
  --ctt-toggle-disabled-opacity: 0.6;
  /* Disabled opacity */

  /* Typography - Label */
  --ctt-toggle-label-font-size: var(--ctt-core-font-size-md);
  /* 16px - Label text size */
  --ctt-toggle-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /* 24px - Label line height */
  --ctt-toggle-label-font-weight: var(--ctt-core-font-weight-book);
  /* 400 - Label font weight */
  --ctt-toggle-label-color: var(--ctt-core-color-neutral-800);
  /* Label text color */

  /* Transitions & Animation */
  --ctt-toggle-transition-duration: 0.15s;
  /* Smooth transition timing */

  /* ========================================================================
     TOGGLESWITCH - SIZE VARIANTS
     ======================================================================== */

  /* Size S (Small) */
  --ctt-toggle-gap-s: var(--ctt-core-space-2);
  /* 4px - Gap between thumb and label */
  --ctt-toggle-track-width-s: 44px;
  /* Track width */
  --ctt-toggle-track-height-s: var(--ctt-core-size-control-s);
  /* 24px - Track height */
  --ctt-toggle-thumb-size-s: var(--ctt-core-size-icon-m);
  /* 16px - Thumb circle diameter */
  --ctt-toggle-thumb-inset-s: var(--ctt-core-space-1);
  /* 4px - Distance from track edge */
  --ctt-toggle-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px - Label text size */
  --ctt-toggle-label-line-height-s: var(--ctt-core-line-height-body-sm);
  /* 20px - Label line height */

  /* Size M (Medium) - Default */
  --ctt-toggle-gap-m: var(--ctt-core-space-2);
  /* 8px - Gap between thumb and label */
  --ctt-toggle-track-width-m: 64px;
  /* Track width */
  --ctt-toggle-track-height-m: var(--ctt-core-size-control-m);
  /* 32px - Track height */
  --ctt-toggle-thumb-size-m: var(--ctt-core-size-icon-xl);
  /* 24px - Thumb circle diameter */
  --ctt-toggle-thumb-inset-m: var(--ctt-core-space-1);
  /* 4px - Distance from track edge */
  --ctt-toggle-label-font-size-m: var(--ctt-core-font-size-md);
  /* 16px - Label text size */
  --ctt-toggle-label-line-height-m: var(--ctt-base-text-style-label-md-line-height);
  /* 24px - Label line height */

  /* Size L (Large) */
  --ctt-toggle-gap-l: var(--ctt-core-space-2);
  /* 8px - Gap between thumb and label */
  --ctt-toggle-track-width-l: 80px;
  /* Track width */
  --ctt-toggle-track-height-l: var(--ctt-core-size-control-l);
  /* 40px - Track height */
  --ctt-toggle-thumb-size-l: var(--ctt-core-size-icon-2xl);
  /* 32px - Thumb circle diameter */
  --ctt-toggle-thumb-inset-l: var(--ctt-core-space-1);
  /* 4px - Distance from track edge */
  --ctt-toggle-label-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px - Label text size */
  --ctt-toggle-label-line-height-l: var(--ctt-core-line-height-body-lg);
  /* 26px - Label line height */
  /* ========================================================================
     TOOLTIP COMPONENT TOKENS
     ======================================================================== */

  /* Layout & Spacing */
  --ctt-tooltip-gap: var(--ctt-core-space-2);
  /* 8px - gap between trigger and tooltip */
  --ctt-tooltip-arrow-size: var(--ctt-core-space-1);
  /* 4px - base arrow size (will be multiplied by 1.25 = 5px) */
  --ctt-tooltip-arrow-offset: 15px;
  /* Offset for start/end arrow positioning */
  --ctt-tooltip-max-width: 300px;
  /* Maximum width on desktop */
  --ctt-tooltip-max-width-mobile: 250px;
  /* Maximum width on mobile */

  /* Colors */
  --ctt-tooltip-bg: var(--ctt-core-color-neutral-900);
  /* #1a1a1a - dark background */
  --ctt-tooltip-text-color: var(--ctt-core-color-basic-white);
  /* #ffffff - white text */
  --ctt-tooltip-arrow-color: var(--ctt-core-color-neutral-900);
  /* Arrow color matches background */

  /* Typography */
  --ctt-tooltip-font-family: var(--ctt-core-font-family-sans);
  /* Acto CTT */
  --ctt-tooltip-font-weight: var(--ctt-core-font-weight-book);
  /* 400 - default weight */
  --ctt-tooltip-font-weight-high-contrast: var(--ctt-core-font-weight-medium);
  /* 500 - for high contrast mode */
  --ctt-tooltip-line-height: var(--ctt-core-line-height-body-md);
  /* 24px */

  /* Size - Small */
  --ctt-tooltip-padding-y-small: var(--ctt-core-space-1);
  /* 4px */
  --ctt-tooltip-padding-x-small: var(--ctt-core-space-2);
  /* 8px */
  --ctt-tooltip-font-size-small: var(--ctt-core-font-size-xs);
  /* 12px */

  /* Size - Medium */
  --ctt-tooltip-padding-y-medium: var(--ctt-core-space-2);
  /* 8px */
  --ctt-tooltip-padding-x-medium: var(--ctt-core-space-3);
  /* 12px */
  --ctt-tooltip-font-size-medium: var(--ctt-core-font-size-sm);
  /* 14px */

  /* Size - Large */
  --ctt-tooltip-padding-y-large: var(--ctt-core-space-3);
  /* 12px */
  --ctt-tooltip-padding-x-large: var(--ctt-core-space-4);
  /* 16px */
  --ctt-tooltip-font-size-large: var(--ctt-core-font-size-md);
  /* 16px */

  /* Border & Shadow */
  --ctt-tooltip-border-radius: var(--ctt-core-radius-xs);
  /* 4px */
  --ctt-tooltip-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* Subtle shadow */
  --ctt-tooltip-border-width-high-contrast: var(--ctt-core-border-width-thin);
  /* 2px - for high contrast mode */

  /* Animation & Effects */
  --ctt-tooltip-transition-duration: var(--ctt-base-motion-duration-control);
  /* 150ms - smooth transition */
  --ctt-tooltip-transform-offset: var(--ctt-core-space-1);
  /* 4px - slide-in animation distance */
  --ctt-tooltip-z-index: var(--ctt-base-z-index-tooltip);
  /* High z-index for overlay */

  /* Disabled State */
  --ctt-tooltip-disabled-opacity: 0.5;
  /* 50% opacity when disabled */

  /* ========================================================================
     ZIP CODE INPUT COMPONENT TOKENS
     
     The ZipCodeInput component provides a two-field input for entering
     zip/postal codes and localities with country-specific validation.
     Supports size variants (s, m, l) and country formats (pt, es, en).
     ======================================================================== */

  /* ========================================================================
     ZIP CODE INPUT - WIDTH
     ======================================================================== */
  --ctt-zip-code-input-width: 100%;
  --ctt-zip-code-input-zipcode-width-s: 100px;
  --ctt-zip-code-input-zipcode-width-m: 120px;
  --ctt-zip-code-input-zipcode-width-l: 140px;

  /* ========================================================================
     ZIP CODE INPUT - HEIGHT
     ======================================================================== */
  --ctt-zip-code-input-height-s: var(--ctt-core-size-control-m);
  /* 32px */
  --ctt-zip-code-input-height-m: var(--ctt-core-size-control-xl);
  /* 48px */
  --ctt-zip-code-input-height-l: var(--ctt-core-size-control-2xl);
  /* 64px */
  --ctt-zip-code-input-height: var(--ctt-zip-code-input-height-xl);

  /* ========================================================================
     ZIP CODE INPUT - PADDING
     ======================================================================== */
  --ctt-zip-code-input-padding-vertical-s: calc(var(--ctt-core-space-2) - 2px);
  /* 6px */
  --ctt-zip-code-input-padding-horizontal-s: calc(var(--ctt-core-space-3) - 2px);
  /* 10px */
  --ctt-zip-code-input-padding-vertical-m: var(--ctt-core-space-2);
  /* 8px */
  --ctt-zip-code-input-padding-horizontal-m: var(--ctt-core-space-3);
  /* 12px */
  --ctt-zip-code-input-padding-vertical-l: var(--ctt-core-space-3);
  /* 12px */
  --ctt-zip-code-input-padding-horizontal-l: var(--ctt-core-space-4);
  /* 16px */

  /* Default padding (medium) */
  --ctt-zip-code-input-padding-vertical: var(--ctt-zip-code-input-padding-vertical-m);
  --ctt-zip-code-input-padding-horizontal: var(--ctt-zip-code-input-padding-horizontal-m);

  /* Focus state padding adjustments (subtract 1px for border) */
  --ctt-zip-code-input-padding-focus-adjustment: 1px;

  /* ========================================================================
     ZIP CODE INPUT - SPACING
     ======================================================================== */
  --ctt-zip-code-input-label-margin-bottom: var(--ctt-core-space-1);
  /* 4px */
  --ctt-zip-code-input-required-margin-left: 2px;
  --ctt-zip-code-input-error-margin-top: var(--ctt-core-space-1);
  /* 4px */
  --ctt-zip-code-input-error-gap: var(--ctt-core-space-1);
  /* 4px */
  --ctt-zip-code-input-gap: var(--ctt-core-space-2);
  /* 8px - gap between zip code and locality fields */

  /* ========================================================================
     ZIP CODE INPUT - TYPOGRAPHY - LABEL
     ======================================================================== */
  --ctt-zip-code-input-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-zip-code-input-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 12px */
  --ctt-zip-code-input-label-font-size-m: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-zip-code-input-label-font-size-l: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-zip-code-input-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-zip-code-input-label-line-height: var(--ctt-base-text-style-label-md-line-height);
  /*20px*/

  /* ========================================================================
     ZIP CODE INPUT - TYPOGRAPHY - INPUT
     ======================================================================== */
  --ctt-zip-code-input-input-font-family: var(--ctt-core-font-family-sans);
  --ctt-zip-code-input-input-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-zip-code-input-input-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-zip-code-input-input-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-zip-code-input-input-font-size: var(--ctt-zip-code-input-input-font-size-m);
  --ctt-zip-code-input-input-line-height: 1.4;

  /* ========================================================================
     ZIP CODE INPUT - TYPOGRAPHY - ERROR
     ======================================================================== */
  --ctt-zip-code-input-error-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-zip-code-input-error-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */

  /* ========================================================================
     ZIP CODE INPUT - COLORS - LABEL
     ======================================================================== */
  --ctt-zip-code-input-label-color-default: var(--ctt-core-color-neutral-800);
  --ctt-zip-code-input-required-color: var(--ctt-core-color-semantic-negative-600);

  /* ========================================================================
     ZIP CODE INPUT - COLORS - INPUT
     ======================================================================== */
  --ctt-zip-code-input-input-bg-default: var(--ctt-core-color-basic-white);
  --ctt-zip-code-input-input-bg-focus: var(--ctt-core-color-basic-white);
  --ctt-zip-code-input-input-bg-disabled: var(--ctt-core-color-neutral-100);
  --ctt-zip-code-input-input-color-default: var(--ctt-core-color-neutral-800);
  --ctt-zip-code-input-input-color-disabled: var(--ctt-core-color-neutral-600);
  --ctt-zip-code-input-input-border-default: var(--ctt-core-color-neutral-500);
  --ctt-zip-code-input-input-border-hover: var(--ctt-base-border-hover);
  --ctt-zip-code-input-input-border-focus: var(--ctt-base-input-border-hover);
  --ctt-zip-code-input-input-border-error: var(--ctt-core-color-semantic-negative-600);
  --ctt-zip-code-input-input-border-disabled: var(--ctt-core-color-neutral-300);

  /* ========================================================================
     ZIP CODE INPUT - COLORS - PLACEHOLDER
     ======================================================================== */
  --ctt-zip-code-input-placeholder-color: var(--ctt-base-input-fg-placeholder);
  --ctt-zip-code-input-placeholder-color-disabled: var(--ctt-core-color-neutral-400);

  /* ========================================================================
     ZIP CODE INPUT - COLORS - ERROR
     ======================================================================== */
  --ctt-zip-code-input-error-color: var(--ctt-core-color-semantic-negative-600);

  /* ========================================================================
     ZIP CODE INPUT - BORDER
     ======================================================================== */
  --ctt-zip-code-input-border-width-default: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-zip-code-input-border-width-focus: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-zip-code-input-border-width-error: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-zip-code-input-border-radius: var(--ctt-core-radius-xs);
  /* 4px */

  /* ========================================================================
     ZIP CODE INPUT - STATE
     ======================================================================== */
  --ctt-zip-code-input-transition-duration: 0.2s;
  --ctt-zip-code-input-transition-timing: ease;

  /* ========================================================================
     ZIP CODE INPUT - ERROR ICON
     ======================================================================== */
  --ctt-zip-code-input-error-icon-size: 16px;

  /* ========================================================================
     ZIP CODE INPUT - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-zip-code-input-mobile-font-size: var(--ctt-core-font-size-md);
  /* 16px - Prevents zoom on iOS */

  /* ========================================================================
     ZIP CODE INPUT - ACCESSIBILITY
     ======================================================================== */
  --ctt-zip-code-input-high-contrast-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-zip-code-input-high-contrast-focus-border-width: var(--ctt-core-border-width-thick);
  /* 3px */
  --ctt-zip-code-input-high-contrast-focus-padding-adjustment: 2px;

  /* ========================================================================
     INPUT IBAN COMPONENT TOKENS
     ======================================================================== */
  /* ========================================================================
     INPUT IBAN - WIDTH
     ======================================================================== */
  --ctt-input-iban-width: 100%;

  /* ========================================================================
     INPUT IBAN - HEIGHT
     ======================================================================== */
  --ctt-input-iban-height-s: var(--ctt-core-size-control-m);
  /* 24px */
  --ctt-input-iban-height-m: var(--ctt-core-size-control-xl);
  /* 32px */
  --ctt-input-iban-height-l: var(--ctt-core-size-control-2xl);
  /* 40px */

  /* ========================================================================
     INPUT IBAN - PADDING
     ======================================================================== */
  --ctt-input-iban-padding-vertical-s: 6px;
  --ctt-input-iban-padding-horizontal-s: 10px;
  --ctt-input-iban-padding-vertical-m: 0px;
  --ctt-input-iban-padding-horizontal-m: var(--ctt-core-space-4);
  /* 16px */
  --ctt-input-iban-padding-vertical-l: var(--ctt-core-space-3);
  /* 12px */
  --ctt-input-iban-padding-horizontal-l: var(--ctt-core-space-4);
  /* 16px */

  /* Default padding (large) */
  --ctt-input-iban-padding-vertical: var(--ctt-core-space-2);
  /* 8px */
  --ctt-input-iban-padding-horizontal: var(--ctt-core-space-3);
  /* 12px */

  /* Focus state padding adjustments (subtract 1px for border) */
  --ctt-input-iban-padding-focus-adjustment: 1px;

  /* ========================================================================
     INPUT IBAN - SPACING
     ======================================================================== */
  --ctt-input-iban-label-margin-bottom: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-iban-required-margin-left: 2px;
  --ctt-input-iban-error-margin-top: var(--ctt-core-space-1);
  /* 4px */
  --ctt-input-iban-error-gap: var(--ctt-core-space-1);
  /* 4px */

  /* ========================================================================
     INPUT IBAN - TYPOGRAPHY - LABEL
     ======================================================================== */
  --ctt-input-iban-label-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-iban-label-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-iban-label-font-size-m: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-iban-label-font-size-l: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-iban-label-font-weight: var(--ctt-core-font-weight-medium);
  /* 500 */
  --ctt-input-iban-label-line-height: var(--ctt-base-text-style-label-md-line-height);

  /* ========================================================================
     INPUT IBAN - TYPOGRAPHY - INPUT
     ======================================================================== */
  --ctt-input-iban-input-font-family: var(--ctt-core-font-family-sans);
  --ctt-input-iban-input-font-size-s: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-iban-input-font-size-m: var(--ctt-core-font-size-md);
  /* 16px */
  --ctt-input-iban-input-font-size-l: var(--ctt-core-font-size-lg);
  /* 18px */
  --ctt-input-iban-input-line-height: 1.4;

  /* ========================================================================
     INPUT IBAN - TYPOGRAPHY - ERROR
     ======================================================================== */
  --ctt-input-iban-error-font-size: var(--ctt-core-font-size-sm);
  /* 14px */
  --ctt-input-iban-error-font-weight: var(--ctt-core-font-weight-book);
  /* 400 */

  /* ========================================================================
     INPUT IBAN - COLORS - LABEL
     ======================================================================== */
  --ctt-input-iban-label-color-default: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-input-iban-required-color: var(--ctt-base-state-error-fg);
  /* negative-500 */

  /* ========================================================================
     INPUT IBAN - COLORS - INPUT
     ======================================================================== */
  --ctt-input-iban-input-bg-default: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-iban-input-bg-focus: var(--ctt-base-surface-container);
  /* white */
  --ctt-input-iban-input-bg-disabled: var(--ctt-base-surface-muted);
  /* neutral-100 */
  --ctt-input-iban-input-color-default: var(--ctt-base-text-main);
  /* neutral-800 */
  --ctt-input-iban-input-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-600 */
  --ctt-input-iban-input-border-default: var(--ctt-base-border-default);
  /* neutral-500 */
  --ctt-input-iban-input-border-hover: var(--ctt-base-border-hover);
  /* neutral-600 */
  --ctt-input-iban-input-border-focus: var(--ctt-base-border-hover);
  /* informative-600 */
  --ctt-input-iban-input-border-error: var(--ctt-base-input-border-error);
  /* negative-600 */
  --ctt-input-iban-input-border-disabled: var(--ctt-base-border-subtle);
  /* neutral-300 */

  /* ========================================================================
     INPUT IBAN - COLORS - PLACEHOLDER
     ======================================================================== */
  --ctt-input-iban-placeholder-color: var(--ctt-base-text-placeholder);
  /* neutral-600 */
  --ctt-input-iban-placeholder-color-disabled: var(--ctt-base-text-disabled);
  /* neutral-400 */

  /* ========================================================================
     INPUT IBAN - COLORS - ERROR
     ======================================================================== */
  --ctt-input-iban-error-color: var(--ctt-base-on-error-fg);
  /* negative-500 */

  /* ========================================================================
     INPUT IBAN - BORDER
     ======================================================================== */
  --ctt-input-iban-border-width-default: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-iban-border-width-focus: var(--ctt-core-border-width-hairline);
  /* 1px */
  --ctt-input-iban-border-width-error: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-iban-border-radius: var(--ctt-core-radius-xs);
  /* 4px */

  /* ========================================================================
     INPUT IBAN - STATE
     ======================================================================== */
  --ctt-input-iban-transition-duration: 0.2s;
  --ctt-input-iban-transition-timing: ease;

  /* ========================================================================
     INPUT IBAN - ERROR ICON
     ======================================================================== */
  --ctt-input-iban-error-icon-size: 16px;

  /* ========================================================================
     INPUT IBAN - RESPONSIVE (Mobile)
     ======================================================================== */
  --ctt-input-iban-mobile-font-size: var(--ctt-core-font-size-md);
  /* 16px - Prevents zoom on iOS */

  /* ========================================================================
     INPUT IBAN - ACCESSIBILITY
     ======================================================================== */
  --ctt-input-iban-high-contrast-border-width: var(--ctt-core-border-width-thin);
  /* 2px */
  --ctt-input-iban-high-contrast-focus-border-width: var(--ctt-core-border-width-thick);
  /* 3px */
  --ctt-input-iban-high-contrast-focus-padding-adjustment: 2px;

  /* ========================================================================
     TABLE - RESPONSIVE (Desktop)
     ======================================================================== */

  --ctt-table-bg-page: var(--ctt-base-surface-muted);
  --ctt-table-bg-card: var(--ctt-base-surface-container);
  --ctt-table-bg-header: var(--ctt-base-surface-container);
  --ctt-table-bg-header-hover: var(--ctt-base-surface-muted);
  --ctt-table-bg-row-hover: var(--ctt-base-surface-muted);
  --ctt-table-bg-row-selected: var(--ctt-base-surface-highlight);
  --ctt-table-bg-row-selected-hover: var(--ctt-base-surface-hover);
  --ctt-table-bg-search: var(--ctt-base-surface-muted);
  --ctt-table-bg-selection-banner: var(--ctt-base-surface-highlight);
  --ctt-table-bg-tabs-active: var(--ctt-base-surface-highlight);
  --ctt-table-bg-tabs-pill-count: var(--ctt-base-surface-muted);
  --ctt-table-bg-filter-chip: var(--ctt-base-surface-highlight);

  --ctt-table-border-card: var(--ctt-base-border-subtle);
  --ctt-table-border-header: var(--ctt-base-border-subtle);
  --ctt-table-border-row: var(--ctt-base-border-subtle);
  --ctt-table-border-selection-banner: var(--ctt-base-border-primary);
  --ctt-table-border-tabs: var(--ctt-base-border-subtle);
  --ctt-table-border-tabs-active: var(--ctt-base-border-primary);
  --ctt-table-border-filter-chip: var(--ctt-base-border-primary-soft,
      var(--ctt-base-border-subtle));

  --ctt-table-text-main: var(--ctt-base-text-main);
  --ctt-table-text-weak: var(--ctt-base-text-weak);
  --ctt-table-text-strong: var(--ctt-base-text-strong);
  --ctt-table-text-brand: var(--ctt-base-text-brand);
  --ctt-table-text-selection-banner: var(--ctt-base-on-highlight-fg);

  --ctt-table-shadow-card: 0px 8px 24px rgba(15, 23, 42, 0.08);

  /* ========================================================================
     MISSING COMPONENT TOKENS (AUDIT FIX)
     ======================================================================== */
  --ctt-button-switch-option-fg-disabled: var(--ctt-base-text-disabled);
  --ctt-input-counter-error-gap: var(--ctt-core-space-1);
  --ctt-input-counter-error-margin-top: var(--ctt-core-space-1);
  --ctt-input-counter-error-color: var(--ctt-base-text-negative);
  --ctt-input-counter-error-icon-size: var(--ctt-icon-size-m);
  --ctt-input-counter-error-font-size: var(--ctt-core-font-size-xs);
  --ctt-input-counter-error-font-weight: var(--ctt-core-font-weight-book);
  --ctt-phone-input-search-height: var(--ctt-core-space-12);
  --ctt-side-panel-item-padding-horizontal: var(--ctt-core-space-4);
  --ctt-zip-code-input-height-xl: var(--ctt-core-space-12);
  --ctt-zip-code-input-zipcode-width: var(--ctt-core-space-16);
}

/* ========================================================================
   2. FONTS - Font face definitions
   ======================================================================== */

/* --- inlined: fonts.css --- */
/**
 * ActoCTT Font Family
 * Using explicit imports to force Vite to copy font files
 */

/* ActoCTT Thin - 250 weight */
@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-Thin.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-Thin.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-Thin.woff') format('woff');
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-ThinItalic.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-ThinItalic.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-ThinItalic.woff') format('woff');
  font-weight: 250;
  font-style: italic;
  font-display: swap;
}

/* ActoCTT Light - 300 weight */
@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-Light.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-Light.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-LightItalic.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-LightItalic.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ActoCTT Book (Regular) - 400 weight */
@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-Book.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-Book.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-BookItalic.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-BookItalic.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-BookItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ActoCTT Medium - 500 weight */
@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-Medium.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-Medium.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-MediumItalic.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-MediumItalic.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ActoCTT Bold - 700 weight */
@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-Bold.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-Bold.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-BoldItalic.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-BoldItalic.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ActoCTT Black - 900 weight */
@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-Black.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-Black.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ActoCTT';
  src: url('../fonts/acto-ctt/ActoCTT-BlackItalic.eot');
  src:
    url('../fonts/acto-ctt/ActoCTT-BlackItalic.eot') format('embedded-opentype'),
    url('../fonts/acto-ctt/ActoCTT-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* CSS Variables - NOW USING ActoCTT as PRIMARY! */
:root {
  --font-family-primary:
    'ActoCTT', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', sans-serif;
  --font-family-icons: 'ctt-icons', monospace;
}

/* Apply ActoCTT to all components */
body,
.font-primary,
.font-acto-ctt {
  font-family: var(--font-family-primary);
}

.icon,
.ctt-icon {
  font-family: var(--font-family-icons);
}

/* --- inlined: icons.css --- */
/**
 * CTT Icon Font System
 * 
 * This file defines the icon font face and individual icon classes.
 * Icons are used with the pattern: <i class="ctt-icon-{iconName}"></i>
 * 
 * Example usage:
 * <i class="ctt-icon-send"></i>
 * <i class="ctt-icon-download"></i>
 * <i class="ctt-icon-search"></i>
 */

/* Font Face Definition - Relative paths for Vite build processing */
@font-face {
  font-family: 'ctt-icons';
  src: url('../fonts/ctt-icons/ctt-icon-font.eot?v=9');
  src:
    url('../fonts/ctt-icons/ctt-icon-font.eot?v=9#iefix') format('embedded-opentype'),
    url('../fonts/ctt-icons/ctt-icon-font.woff?v=9') format('woff'),
    url('../fonts/ctt-icons/ctt-icon-font.ttf?v=9') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================
   3. TYPOGRAPHY - Text styles and scales
   ======================================================================== */

/* --- inlined: typography.css --- */
/**
 * ============================================================================
 * CTT DESIGN SYSTEM - TYPOGRAPHY UTILITY CLASSES
 * ============================================================================
 * 
 * Token-based typography utilities aligned with the new design token system.
 * All utilities reference BASE TEXT STYLE tokens from new-tokens.css
 * 
 * ----------------------------------------------------------------------------
 * TOKEN HIERARCHY
 * ----------------------------------------------------------------------------
 * Typography utilities use the following token hierarchy:
 * 
 * Brand → CORE → BASE TEXT STYLES → Typography Utilities
 * 
 * BASE TEXT STYLE TOKENS (--ctt-base-text-style-*):
 *   These are compound tokens that define complete text styles including:
 *   - family: Font family (Acto CTT)
 *   - size: Font size in pixels
 *   - line-height: Line height in pixels  
 *   - weight: Font weight (400, 500, 700, etc.)
 * 
 * CORE TOKENS (--ctt-core-font-*, --ctt-core-line-height-*):
 *   System-level primitives used to build BASE tokens
 * 
 * ----------------------------------------------------------------------------
 * TYPOGRAPHY CATEGORIES
 * ----------------------------------------------------------------------------
 * 
 * 1. BODY TEXT (.ctt-body-*)
 *    Purpose: General content, paragraphs, descriptions
 *    Variants: Small (s), Medium (m), Large (l)
 *    Font Weight: Regular (400)
 *    Uses: --ctt-base-text-style-body-{sm|md|lg}-*
 * 
 *    Sizes:
 *    - body-s  → 14px / 20px line-height / 400 weight
 *    - body-m  → 16px / 24px line-height / 400 weight
 *    - body-l  → 18px / 28px line-height / 400 weight
 * 
 * 2. LABELS (.ctt-label-*)
 *    Purpose: Form labels, UI labels, metadata, captions
 *    Variants: Small (s), Medium (m), Large (l)
 *    Font Weight: Medium (500)
 *    Uses: --ctt-base-text-style-label-{sm|md|lg}-*
 * 
 *    Sizes:
 *    - label-s  → 12px / 16px line-height / 500 weight
 *    - label-m  → 14px / 20px line-height / 500 weight
 *    - label-l  → 16px / 24px line-height / 500 weight
 * 
 * 3. TITLES (.ctt-title-*)
 *    Purpose: Section headings, card titles, page headers
 *    Variants: Extra Small (xs), Small (s), Medium (m), Large (l), Extra Large (xl)
 *    Font Weight: Medium (500)
 *    Uses: --ctt-base-text-style-heading-title-desktop-{xs|sm|md|lg|xl}-*
 * 
 *    Sizes (Desktop defaults):
 *    - title-xs  → 20px / 28px line-height / 500 weight
 *    - title-s   → 24px / 32px line-height / 500 weight
 *    - title-m   → 28px / 36px line-height / 500 weight
 *    - title-l   → 32px / 40px line-height / 500 weight
 *    - title-xl  → 40px / 48px line-height / 500 weight
 * 
 * 4. DISPLAY TEXT (.ctt-display-*)
 *    Purpose: Hero sections, marketing headlines, large UI elements
 *    Variants: Small (s), Medium (m), Large (l), Extra Large (xl)
 *    Font Weight: Medium (500)
 *    Uses: --ctt-base-text-style-heading-display-desktop-{sm|md|lg|xl}-*
 * 
 *    Sizes (Desktop defaults):
 *    - display-s   → 32px / 40px line-height / 500 weight
 *    - display-m   → 48px / 56px line-height / 500 weight
 *    - display-l   → 60px / 68px line-height / 500 weight
 *    - display-xl  → 72px / 80px line-height / 500 weight
 * 
 * ----------------------------------------------------------------------------
 * RESPONSIVE TYPOGRAPHY
 * ----------------------------------------------------------------------------
 * Device-specific variants automatically adjust at breakpoints:
 * 
 * TITLES:
 * - Desktop (≥1024px): .ctt-title-desktop-{xs|s|m|l|xl}
 * - Tablet (768-1023px): .ctt-title-tablet-{s|m|l}
 * - Mobile (≤767px): .ctt-title-mobile-{s|m}
 * 
 * DISPLAY:
 * - Desktop (≥1024px): .ctt-display-desktop-{s|m|l|xl}
 * - Tablet (768-1023px): .ctt-display-tablet-{s|m}
 * - Mobile (≤767px): .ctt-display-mobile-s
 * 
 * ----------------------------------------------------------------------------
 * ADDITIONAL UTILITIES
 * ----------------------------------------------------------------------------
 * Font Weights: .ctt-font-{thin|light|book|medium|bold|black}
 * Text Alignment: .ctt-text-{left|center|right|justify}
 * Text Decoration: .ctt-{underline|no-underline|line-through}
 * Text Transform: .ctt-{uppercase|lowercase|capitalize|normal-case}
 * Letter Spacing: .ctt-tracking-{tight|normal|wide}
 * Line Height: .ctt-leading-{tight|normal|loose}
 * 
 * ----------------------------------------------------------------------------
 * USAGE EXAMPLES
 * ----------------------------------------------------------------------------
 * ```html
 * <!-- Body Content -->
 * <p class="ctt-body-m">This is a paragraph with medium body text.</p>
 * <p class="ctt-body-l ctt-font-medium">Large body text with medium weight.</p>
 * 
 * <!-- Form Labels -->
 * <label class="ctt-label-m">Email Address</label>
 * <span class="ctt-label-s ctt-text-weak">Optional field</span>
 * 
 * <!-- Page Titles -->
 * <h1 class="ctt-title-xl">Welcome to CTT Design System</h1>
 * <h2 class="ctt-title-l">Section Heading</h2>
 * <h3 class="ctt-title-m">Card Title</h3>
 * 
 * <!-- Hero/Display Text -->
 * <h1 class="ctt-display-xl">Amazing Experience</h1>
 * <h2 class="ctt-display-m ctt-text-center">Centered Display Text</h2>
 * 
 * <!-- Responsive Typography -->
 * <h1 class="ctt-title-desktop-xl ctt-title-tablet-l ctt-title-mobile-m">
 *   Responsive Heading
 * </h1>
 * ```
 * 
 * ----------------------------------------------------------------------------
 * BEST PRACTICES
 * ----------------------------------------------------------------------------
 * 1. Use semantic HTML elements (h1-h6, p, label) with utility classes
 * 2. Prefer typography utilities over custom font-size declarations
 * 3. Use responsive variants for adaptive typography across devices
 * 4. Combine with color utilities (ctt-text-*) for complete styling
 * 5. Maintain heading hierarchy (h1 → h2 → h3) for accessibility
 * 6. Use display text for marketing/hero sections, titles for UI headings
 * 7. Use labels for form controls and UI metadata
 * 8. Body text should be used for all paragraph content
 * 
 * ============================================================================
 */

/* ==========================================================================
   BODY TYPOGRAPHY UTILITIES
   Base tokens for body text (paragraphs, descriptions, content)
   Font: Acto CTT Regular (400) | Responsive line heights
   ========================================================================== */

.ctt-body-s {
  font-family: var(--ctt-base-text-style-body-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-body-sm-size) !important;
  /* 14px */
  line-height: var(--ctt-base-text-style-body-sm-line-height) !important;
  /* 20px */
  font-weight: var(--ctt-base-text-style-body-sm-weight) !important;
  /* 400 */
}

.ctt-body-m {
  font-family: var(--ctt-base-text-style-body-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-body-md-size) !important;
  /* 16px */
  line-height: var(--ctt-base-text-style-body-md-line-height) !important;
  /* 24px */
  font-weight: var(--ctt-base-text-style-body-md-weight) !important;
  /* 400 */
}

.ctt-body-l {
  font-family: var(--ctt-base-text-style-body-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-body-lg-size) !important;
  /* 18px */
  line-height: var(--ctt-base-text-style-body-lg-line-height) !important;
  /* 28px */
  font-weight: var(--ctt-base-text-style-body-lg-weight) !important;
  /* 400 */
}

/* ==========================================================================
   LABEL TYPOGRAPHY UTILITIES
   Base tokens for labels (form labels, UI labels, captions, metadata)
   Font: Acto CTT Medium (500) | Tight line heights
   ========================================================================== */

.ctt-label-s {
  font-family: var(--ctt-base-text-style-label-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-label-sm-size) !important;
  /* 12px */
  line-height: var(--ctt-base-text-style-label-sm-line-height) !important;
  /* 16px */
  font-weight: var(--ctt-base-text-style-label-sm-weight) !important;
  /* 500 */
}

.ctt-label-m {
  font-family: var(--ctt-base-text-style-label-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-label-md-size) !important;
  /* 14px */
  line-height: var(--ctt-base-text-style-label-md-line-height) !important;
  /* 20px */
  font-weight: var(--ctt-base-text-style-label-md-weight) !important;
  /* 500 */
}

.ctt-label-l {
  font-family: var(--ctt-base-text-style-label-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-label-lg-size) !important;
  /* 16px */
  line-height: var(--ctt-base-text-style-label-lg-line-height) !important;
  /* 24px */
  font-weight: var(--ctt-base-text-style-label-lg-weight) !important;
  /* 500 */
}

/* ==========================================================================
   TITLE TYPOGRAPHY UTILITIES
   Base tokens for titles (headings, section headers, card titles)
   Font: Acto CTT Medium (500) | Uses desktop tokens by default
   ========================================================================== */

.ctt-title-xs {
  font-family: var(--ctt-base-text-style-heading-title-desktop-xs-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-xs-size) !important;
  /* 20px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-xs-line-height) !important;
  /* 28px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-xs-weight) !important;
  /* 500 */
}

.ctt-title-s {
  font-family: var(--ctt-base-text-style-heading-title-desktop-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-sm-size) !important;
  /* 24px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-sm-line-height) !important;
  /* 32px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-sm-weight) !important;
  /* 500 */
}

.ctt-title-m {
  font-family: var(--ctt-base-text-style-heading-title-desktop-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-md-size) !important;
  /* 28px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-md-line-height) !important;
  /* 36px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-md-weight) !important;
  /* 500 */
}

.ctt-title-l {
  font-family: var(--ctt-base-text-style-heading-title-desktop-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-lg-size) !important;
  /* 32px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-lg-line-height) !important;
  /* 40px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-lg-weight) !important;
  /* 500 */
}

.ctt-title-xl {
  font-family: var(--ctt-base-text-style-heading-title-desktop-xl-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-xl-size) !important;
  /* 40px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-xl-line-height) !important;
  /* 48px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-xl-weight) !important;
  /* 500 */
}

/* ==========================================================================
   DISPLAY TYPOGRAPHY UTILITIES
   Base tokens for display text (heroes, large headlines, marketing)
   Font: Acto CTT Medium (500) | Uses desktop tokens by default
   ========================================================================== */

.ctt-display-s {
  font-family: var(--ctt-base-text-style-heading-display-desktop-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-sm-size) !important;
  /* 32px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-sm-line-height) !important;
  /* 40px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-sm-weight) !important;
  /* 500 */
}

.ctt-display-m {
  font-family: var(--ctt-base-text-style-heading-display-desktop-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-md-size) !important;
  /* 48px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-md-line-height) !important;
  /* 56px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-md-weight) !important;
  /* 500 */
}

.ctt-display-l {
  font-family: var(--ctt-base-text-style-heading-display-desktop-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-lg-size) !important;
  /* 60px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-lg-line-height) !important;
  /* 68px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-lg-weight) !important;
  /* 500 */
}

.ctt-display-xl {
  font-family: var(--ctt-base-text-style-heading-display-desktop-xl-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-xl-size) !important;
  /* 72px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-xl-line-height) !important;
  /* 80px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-xl-weight) !important;
  /* 500 */
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES - DESKTOP
   Device-specific typography for desktop screens (min-width: 1024px)
   ========================================================================== */

@media (min-width: 1024px) {

  /* Desktop Title Variants */
  .ctt-title-desktop-s {
    font-family: var(--ctt-base-text-style-heading-title-desktop-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-sm-weight) !important;
  }

  .ctt-title-desktop-m {
    font-family: var(--ctt-base-text-style-heading-title-desktop-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-md-weight) !important;
  }

  .ctt-title-desktop-l {
    font-family: var(--ctt-base-text-style-heading-title-desktop-lg-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-lg-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-lg-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-lg-weight) !important;
  }

  .ctt-title-desktop-xl {
    font-family: var(--ctt-base-text-style-heading-title-desktop-xl-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-xl-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-xl-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-xl-weight) !important;
  }

  /* Desktop Display Variants */
  .ctt-display-desktop-s {
    font-family: var(--ctt-base-text-style-heading-display-desktop-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-desktop-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-desktop-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-desktop-sm-weight) !important;
  }

  .ctt-display-desktop-m {
    font-family: var(--ctt-base-text-style-heading-display-desktop-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-desktop-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-desktop-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-desktop-md-weight) !important;
  }

  .ctt-display-desktop-l {
    font-family: var(--ctt-base-text-style-heading-display-desktop-lg-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-desktop-lg-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-desktop-lg-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-desktop-lg-weight) !important;
  }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES - TABLET
   Device-specific typography for tablets (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Tablet Title Variants */
  .ctt-title-tablet-s {
    font-family: var(--ctt-base-text-style-heading-title-tablet-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-tablet-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-tablet-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-tablet-sm-weight) !important;
  }

  .ctt-title-tablet-m {
    font-family: var(--ctt-base-text-style-heading-title-tablet-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-tablet-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-tablet-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-tablet-md-weight) !important;
  }

  .ctt-title-tablet-l {
    font-family: var(--ctt-base-text-style-heading-title-tablet-lg-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-tablet-lg-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-tablet-lg-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-tablet-lg-weight) !important;
  }

  /* Tablet Display Variants */
  .ctt-display-tablet-s {
    font-family: var(--ctt-base-text-style-heading-display-tablet-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-tablet-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-tablet-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-tablet-sm-weight) !important;
  }

  .ctt-display-tablet-m {
    font-family: var(--ctt-base-text-style-heading-display-tablet-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-tablet-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-tablet-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-tablet-md-weight) !important;
  }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES - MOBILE
   Device-specific typography for mobile (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Mobile Title Variants */
  .ctt-title-mobile-s {
    font-family: var(--ctt-base-text-style-heading-title-mobile-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-mobile-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-mobile-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-mobile-sm-weight) !important;
  }

  .ctt-title-mobile-m {
    font-family: var(--ctt-base-text-style-heading-title-mobile-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-mobile-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-mobile-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-mobile-md-weight) !important;
  }

  /* Mobile Display Variant */
  .ctt-display-mobile-s {
    font-family: var(--ctt-base-text-style-heading-display-mobile-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-mobile-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-mobile-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-mobile-sm-weight) !important;
  }
}

/* ==========================================================================
   FONT WEIGHT UTILITIES
   Direct access to core font weights for custom styling
   ========================================================================== */

.ctt-font-thin {
  font-weight: var(--ctt-core-font-weight-thin) !important;
}

/* 250 */
.ctt-font-light {
  font-weight: var(--ctt-core-font-weight-light) !important;
}

/* 300 */
.ctt-font-book {
  font-weight: var(--ctt-core-font-weight-book) !important;
}

/* 400 */
.ctt-font-medium {
  font-weight: var(--ctt-core-font-weight-medium) !important;
}

/* 500 */
.ctt-font-bold {
  font-weight: var(--ctt-core-font-weight-bold) !important;
}

/* 700 */
.ctt-font-black {
  font-weight: var(--ctt-core-font-weight-black) !important;
}

/* 900 */

/* ==========================================================================
   LETTER SPACING UTILITIES
   Direct access to core letter spacing values
   ========================================================================== */

.ctt-tracking-tight {
  letter-spacing: var(--ctt-core-letter-spacing-tight) !important;
}

/* -1px */
.ctt-tracking-normal {
  letter-spacing: var(--ctt-core-letter-spacing-normal) !important;
}

/* 0px */
.ctt-tracking-wide {
  letter-spacing: var(--ctt-core-letter-spacing-wide) !important;
}

/* 1px */

/* ==========================================================================
   LINE HEIGHT UTILITIES
   Relative line heights for flexible typography
   ========================================================================== */

.ctt-leading-none {
  line-height: 1 !important;
}

/* 100% */
.ctt-leading-tight {
  line-height: 1.1 !important;
}

/* 110% */
.ctt-leading-normal {
  line-height: 1.25 !important;
}

/* 125% */
.ctt-leading-relaxed {
  line-height: 1.5 !important;
}

/* 150% */
.ctt-leading-loose {
  line-height: 1.75 !important;
}

/* 175% */

/* ==========================================================================
   TEXT ALIGNMENT UTILITIES
   Horizontal text alignment options
   ========================================================================== */

.ctt-text-left {
  text-align: left !important;
}

.ctt-text-center {
  text-align: center !important;
}

.ctt-text-right {
  text-align: right !important;
}

.ctt-text-justify {
  text-align: justify !important;
}

/* ==========================================================================
   TEXT DECORATION UTILITIES
   Underlines, strikethroughs, and decoration removal
   ========================================================================== */

.ctt-underline {
  text-decoration: underline !important;
}

.ctt-no-underline {
  text-decoration: none !important;
}

.ctt-line-through {
  text-decoration: line-through !important;
}

/* ==========================================================================
   TEXT TRANSFORM UTILITIES
   Case transformations for text content
   ========================================================================== */

.ctt-uppercase {
  text-transform: uppercase !important;
}

.ctt-lowercase {
  text-transform: lowercase !important;
}

.ctt-capitalize {
  text-transform: capitalize !important;
}

.ctt-normal-case {
  text-transform: none !important;
}

/* ==========================================================================
   TEXT WRAPPING UTILITIES
   Control text overflow and wrapping behavior
   ========================================================================== */

.ctt-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ctt-text-wrap {
  white-space: normal !important;
}

.ctt-text-nowrap {
  white-space: nowrap !important;
}

.ctt-break-words {
  word-break: break-word !important;
}

.ctt-break-all {
  word-break: break-all !important;
}

/* ========================================================================
   4. COLORS - Color utilities and semantic color tokens
   ======================================================================== */

/* --- inlined: colors.css --- */
/**
 * 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;
}

/* ========================================================================
   5. SPACING & LAYOUT - Margin, padding, flex, grid utilities
   ======================================================================== */

/* --- inlined: spacing.css --- */
/**
 * ============================================================================
 * CTT DESIGN SYSTEM - SPACING UTILITY CLASSES
 * ============================================================================
 * 
 * Token-based spacing utilities for consistent margins and padding across the
 * design system. All utilities reference CORE SPACE tokens from new-tokens.css
 * built on a 4px base grid system.
 * 
 * ----------------------------------------------------------------------------
 * TOKEN HIERARCHY
 * ----------------------------------------------------------------------------
 * Spacing utilities use CORE tokens that provide system-level dimensions:
 * 
 * Brand → CORE SPACE TOKENS → Spacing Utilities
 * 
 * CORE SPACE TOKENS (--ctt-core-space-*):
 *   Direct pixel values aligned to 4px grid system:
 *   - space-0   → 0px
 *   - space-1   → 4px
 *   - space-2   → 8px
 *   - space-3   → 12px
 *   - space-4   → 16px
 *   - space-5   → 20px
 *   - space-6   → 24px
 *   - space-8   → 32px
 *   - space-10  → 40px
 *   - space-12  → 48px
 *   - space-16  → 64px
 *   - space-20  → 80px
 *   - space-24  → 96px
 *   - space-28  → 112px
 *   - space-32  → 128px
 *   - space-px  → 1px
 * 
 * ----------------------------------------------------------------------------
 * SPACING SCALE
 * ----------------------------------------------------------------------------
 * The utility class numbers map directly to actual pixel values on a 4px grid:
 * 
 *   Class → Pixel Value → Token Used
 *   ──────────────────────────────────
 *   *-0   → 0px          → space-0
 *   *-1   → 4px          → space-1
 *   *-2   → 8px          → space-2
 *   *-3   → 12px         → space-3
 *   *-4   → 16px         → space-4
 *   *-5   → 20px         → space-5
 *   *-6   → 24px         → space-6
 *   *-8   → 32px         → space-8
 *   *-10  → 40px         → space-10
 *   *-12  → 48px         → space-12
 *   *-16  → 64px         → space-16
 *   *-20  → 80px         → space-20
 *   *-24  → 96px         → space-24
 *   *-28  → 112px        → space-28
 *   *-32  → 128px        → space-32
 *   *-px  → 1px          → space-px
 * 
 * Note: Scale intentionally skips 7, 9, 11, 13, 14, etc. to maintain a
 * consistent rhythm aligned with the 4px grid system.
 * 
 * ----------------------------------------------------------------------------
 * PADDING UTILITIES
 * ----------------------------------------------------------------------------
 * All sides:   .ctt-p-{size}   → padding: {size}
 * Horizontal:  .ctt-px-{size}  → padding-left + padding-right: {size}
 * Vertical:    .ctt-py-{size}  → padding-top + padding-bottom: {size}
 * Top:         .ctt-pt-{size}  → padding-top: {size}
 * Right:       .ctt-pr-{size}  → padding-right: {size}
 * Bottom:      .ctt-pb-{size}  → padding-bottom: {size}
 * Left:        .ctt-pl-{size}  → padding-left: {size}
 * 
 * Examples:
 *   <div class="ctt-p-4">              <!-- 16px padding all sides -->
 *   <div class="ctt-px-6 ctt-py-2">    <!-- 24px horizontal, 8px vertical -->
 *   <div class="ctt-pt-8 ctt-pb-4">    <!-- 32px top, 16px bottom -->
 * 
 * ----------------------------------------------------------------------------
 * MARGIN UTILITIES
 * ----------------------------------------------------------------------------
 * All sides:   .ctt-m-{size}   → margin: {size}
 * Horizontal:  .ctt-mx-{size}  → margin-left + margin-right: {size}
 * Vertical:    .ctt-my-{size}  → margin-top + margin-bottom: {size}
 * Top:         .ctt-mt-{size}  → margin-top: {size}
 * Right:       .ctt-mr-{size}  → margin-right: {size}
 * Bottom:      .ctt-mb-{size}  → margin-bottom: {size}
 * Left:        .ctt-ml-{size}  → margin-left: {size}
 * 
 * Auto margins (centering):
 *   .ctt-m-auto   → margin: auto
 *   .ctt-mx-auto  → margin-left: auto; margin-right: auto (horizontal center)
 *   .ctt-my-auto  → margin-top: auto; margin-bottom: auto (vertical center)
 *   .ctt-mt-auto, .ctt-mr-auto, .ctt-mb-auto, .ctt-ml-auto
 * 
 * Examples:
 *   <div class="ctt-m-4">              <!-- 16px margin all sides -->
 *   <div class="ctt-mx-auto">          <!-- Horizontally centered -->
 *   <div class="ctt-mt-8 ctt-mb-4">    <!-- 32px top, 16px bottom -->
 * 
 * ----------------------------------------------------------------------------
 * NEGATIVE MARGINS
 * ----------------------------------------------------------------------------
 * Used for overlapping elements or pulling content:
 *   .ctt--m-{size}   → margin: -{size} (all sides)
 *   .ctt--mx-{size}  → negative horizontal margins
 *   .ctt--my-{size}  → negative vertical margins
 *   .ctt--mt-{size}, .ctt--mr-{size}, .ctt--mb-{size}, .ctt--ml-{size}
 * 
 * Examples:
 *   <div class="ctt--mt-4">            <!-- Pull up by 16px -->
 *   <div class="ctt--mx-2">            <!-- Extend 8px on both sides -->
 * 
 * ----------------------------------------------------------------------------
 * RESPONSIVE SPACING
 * ----------------------------------------------------------------------------
 * All spacing utilities can be combined with responsive design patterns:
 *   - Use CSS media queries to override spacing at different breakpoints
 *   - Stack multiple utilities for complex responsive layouts
 *   - Combine with layout utilities for complete responsive control
 * 
 * Example:
 *   <div class="ctt-p-2 ctt-m-4">
 *     @media (min-width: 768px) { .ctt-p-4 .ctt-m-8 }
 *   </div>
 * 
 * ----------------------------------------------------------------------------
 * BEST PRACTICES
 * ----------------------------------------------------------------------------
 * 1. Prefer spacing utilities over custom CSS for consistency
 * 2. Use the spacing scale (4px grid) - avoid arbitrary values
 * 3. Use padding for internal spacing, margin for external spacing
 * 4. Use mx-auto for horizontal centering of fixed-width elements
 * 5. Use negative margins sparingly - they can break layouts if misused
 * 6. Combine utilities for complex spacing: "ctt-px-6 ctt-py-4"
 * 7. Consider component spacing tokens for reusable patterns
 * 
 * ============================================================================
 */

/* ==========================================================================
   PADDING UTILITIES
   ========================================================================== */

/* All sides padding - Apply same padding to all four sides */
.ctt-p-0 {
  padding: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-p-1 {
  padding: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-p-2 {
  padding: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-p-3 {
  padding: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-p-4 {
  padding: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-p-6 {
  padding: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-p-8 {
  padding: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-p-10 {
  padding: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-p-12 {
  padding: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-p-16 {
  padding: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-p-20 {
  padding: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Horizontal padding (left and right) - Apply padding to horizontal axis */
.ctt-px-0 {
  padding-left: var(--ctt-core-space-0) !important;
  padding-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-px-1 {
  padding-left: var(--ctt-core-space-1) !important;
  padding-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-px-2 {
  padding-left: var(--ctt-core-space-2) !important;
  padding-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-px-3 {
  padding-left: var(--ctt-core-space-3) !important;
  padding-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-px-4 {
  padding-left: var(--ctt-core-space-4) !important;
  padding-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-px-6 {
  padding-left: var(--ctt-core-space-6) !important;
  padding-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-px-8 {
  padding-left: var(--ctt-core-space-8) !important;
  padding-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-px-10 {
  padding-left: var(--ctt-core-space-10) !important;
  padding-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-px-12 {
  padding-left: var(--ctt-core-space-12) !important;
  padding-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-px-16 {
  padding-left: var(--ctt-core-space-16) !important;
  padding-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-px-20 {
  padding-left: var(--ctt-core-space-20) !important;
  padding-right: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Vertical padding (top and bottom) - Apply padding to vertical axis */
.ctt-py-0 {
  padding-top: var(--ctt-core-space-0) !important;
  padding-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-py-1 {
  padding-top: var(--ctt-core-space-1) !important;
  padding-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-py-2 {
  padding-top: var(--ctt-core-space-2) !important;
  padding-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-py-3 {
  padding-top: var(--ctt-core-space-3) !important;
  padding-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-py-4 {
  padding-top: var(--ctt-core-space-4) !important;
  padding-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-py-6 {
  padding-top: var(--ctt-core-space-6) !important;
  padding-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-py-8 {
  padding-top: var(--ctt-core-space-8) !important;
  padding-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-py-10 {
  padding-top: var(--ctt-core-space-10) !important;
  padding-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-py-12 {
  padding-top: var(--ctt-core-space-12) !important;
  padding-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-py-16 {
  padding-top: var(--ctt-core-space-16) !important;
  padding-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-py-20 {
  padding-top: var(--ctt-core-space-20) !important;
  padding-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Top */
.ctt-pt-0 {
  padding-top: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pt-1 {
  padding-top: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pt-2 {
  padding-top: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pt-3 {
  padding-top: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pt-4 {
  padding-top: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pt-6 {
  padding-top: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pt-8 {
  padding-top: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pt-10 {
  padding-top: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pt-12 {
  padding-top: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pt-16 {
  padding-top: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pt-20 {
  padding-top: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Right */
.ctt-pr-0 {
  padding-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pr-1 {
  padding-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pr-2 {
  padding-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pr-3 {
  padding-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pr-4 {
  padding-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pr-6 {
  padding-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pr-8 {
  padding-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pr-10 {
  padding-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pr-12 {
  padding-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pr-16 {
  padding-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pr-20 {
  padding-right: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Bottom */
.ctt-pb-0 {
  padding-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pb-1 {
  padding-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pb-2 {
  padding-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pb-3 {
  padding-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pb-4 {
  padding-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pb-6 {
  padding-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pb-8 {
  padding-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pb-10 {
  padding-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pb-12 {
  padding-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pb-16 {
  padding-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pb-20 {
  padding-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Left */
.ctt-pl-0 {
  padding-left: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pl-1 {
  padding-left: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pl-2 {
  padding-left: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pl-3 {
  padding-left: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pl-4 {
  padding-left: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pl-6 {
  padding-left: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pl-8 {
  padding-left: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pl-10 {
  padding-left: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pl-12 {
  padding-left: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pl-16 {
  padding-left: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pl-20 {
  padding-left: var(--ctt-core-space-20) !important;
} /* → 80px */

/* ==========================================================================
   MARGIN UTILITIES
   ========================================================================== */

/* All sides margin - Apply same margin to all four sides */
.ctt-m-0 {
  margin: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-m-1 {
  margin: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-m-2 {
  margin: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-m-3 {
  margin: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-m-4 {
  margin: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-m-6 {
  margin: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-m-8 {
  margin: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-m-10 {
  margin: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-m-12 {
  margin: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-m-16 {
  margin: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-m-20 {
  margin: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Auto margin - For centering elements */
.ctt-m-auto {
  margin: auto !important;
} /* → auto */

/* Horizontal margin (left and right) - Apply margin to horizontal axis */
.ctt-mx-0 {
  margin-left: var(--ctt-core-space-0) !important;
  margin-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mx-1 {
  margin-left: var(--ctt-core-space-1) !important;
  margin-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mx-2 {
  margin-left: var(--ctt-core-space-2) !important;
  margin-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mx-3 {
  margin-left: var(--ctt-core-space-3) !important;
  margin-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mx-4 {
  margin-left: var(--ctt-core-space-4) !important;
  margin-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mx-6 {
  margin-left: var(--ctt-core-space-6) !important;
  margin-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mx-8 {
  margin-left: var(--ctt-core-space-8) !important;
  margin-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mx-10 {
  margin-left: var(--ctt-core-space-10) !important;
  margin-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mx-12 {
  margin-left: var(--ctt-core-space-12) !important;
  margin-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mx-16 {
  margin-left: var(--ctt-core-space-16) !important;
  margin-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mx-20 {
  margin-left: var(--ctt-core-space-20) !important;
  margin-right: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
} /* → auto (horizontal center) */

/* Vertical margin (top and bottom) - Apply margin to vertical axis */
.ctt-my-0 {
  margin-top: var(--ctt-core-space-0) !important;
  margin-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-my-1 {
  margin-top: var(--ctt-core-space-1) !important;
  margin-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-my-2 {
  margin-top: var(--ctt-core-space-2) !important;
  margin-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-my-3 {
  margin-top: var(--ctt-core-space-3) !important;
  margin-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-my-4 {
  margin-top: var(--ctt-core-space-4) !important;
  margin-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-my-6 {
  margin-top: var(--ctt-core-space-6) !important;
  margin-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-my-8 {
  margin-top: var(--ctt-core-space-8) !important;
  margin-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-my-10 {
  margin-top: var(--ctt-core-space-10) !important;
  margin-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-my-12 {
  margin-top: var(--ctt-core-space-12) !important;
  margin-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-my-16 {
  margin-top: var(--ctt-core-space-16) !important;
  margin-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-my-20 {
  margin-top: var(--ctt-core-space-20) !important;
  margin-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
} /* → auto (vertical center) */

/* Individual side margin - Top */
.ctt-mt-0 {
  margin-top: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mt-1 {
  margin-top: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mt-2 {
  margin-top: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mt-3 {
  margin-top: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mt-4 {
  margin-top: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mt-6 {
  margin-top: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mt-8 {
  margin-top: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mt-10 {
  margin-top: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mt-12 {
  margin-top: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mt-16 {
  margin-top: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mt-20 {
  margin-top: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mt-auto {
  margin-top: auto !important;
} /* → auto */

/* Individual side margin - Right */
.ctt-mr-0 {
  margin-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mr-1 {
  margin-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mr-2 {
  margin-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mr-3 {
  margin-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mr-4 {
  margin-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mr-6 {
  margin-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mr-8 {
  margin-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mr-10 {
  margin-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mr-12 {
  margin-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mr-16 {
  margin-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mr-20 {
  margin-right: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mr-auto {
  margin-right: auto !important;
} /* → auto */

/* Individual side margin - Bottom */
.ctt-mb-0 {
  margin-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mb-1 {
  margin-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mb-2 {
  margin-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mb-3 {
  margin-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mb-4 {
  margin-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mb-6 {
  margin-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mb-8 {
  margin-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mb-10 {
  margin-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mb-12 {
  margin-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mb-16 {
  margin-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mb-20 {
  margin-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mb-auto {
  margin-bottom: auto !important;
} /* → auto */

/* Individual side margin - Left */
.ctt-ml-0 {
  margin-left: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-ml-1 {
  margin-left: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-ml-2 {
  margin-left: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-ml-3 {
  margin-left: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-ml-4 {
  margin-left: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-ml-6 {
  margin-left: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-ml-8 {
  margin-left: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-ml-10 {
  margin-left: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-ml-12 {
  margin-left: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-ml-16 {
  margin-left: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-ml-20 {
  margin-left: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-ml-auto {
  margin-left: auto !important;
} /* → auto */

/* ==========================================================================
   NEGATIVE MARGIN UTILITIES
   ========================================================================== */
/* 
 * Negative margins for pulling elements or creating overlaps.
 * Use sparingly and with caution - can break layouts if misused.
 * Common use cases: overlapping cards, pull-up effects, extending beyond container
 */

/* Negative margin - All sides */
.ctt--m-1 {
  margin: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--m-2 {
  margin: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--m-3 {
  margin: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--m-4 {
  margin: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--m-6 {
  margin: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--m-8 {
  margin: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */
.ctt--m-10 {
  margin: calc(var(--ctt-core-space-10) * -1) !important;
} /* → -40px */
.ctt--m-12 {
  margin: calc(var(--ctt-core-space-12) * -1) !important;
} /* → -48px */

/* Negative margin - Horizontal */
.ctt--mx-1 {
  margin-left: calc(var(--ctt-core-space-1) * -1) !important;
  margin-right: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mx-2 {
  margin-left: calc(var(--ctt-core-space-2) * -1) !important;
  margin-right: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mx-3 {
  margin-left: calc(var(--ctt-core-space-3) * -1) !important;
  margin-right: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mx-4 {
  margin-left: calc(var(--ctt-core-space-4) * -1) !important;
  margin-right: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mx-6 {
  margin-left: calc(var(--ctt-core-space-6) * -1) !important;
  margin-right: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mx-8 {
  margin-left: calc(var(--ctt-core-space-8) * -1) !important;
  margin-right: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* Negative margin - Vertical */
.ctt--my-1 {
  margin-top: calc(var(--ctt-core-space-1) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--my-2 {
  margin-top: calc(var(--ctt-core-space-2) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--my-3 {
  margin-top: calc(var(--ctt-core-space-3) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--my-4 {
  margin-top: calc(var(--ctt-core-space-4) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--my-6 {
  margin-top: calc(var(--ctt-core-space-6) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--my-8 {
  margin-top: calc(var(--ctt-core-space-8) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* Negative margin - Top */
.ctt--mt-1 {
  margin-top: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mt-2 {
  margin-top: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mt-3 {
  margin-top: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mt-4 {
  margin-top: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mt-6 {
  margin-top: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mt-8 {
  margin-top: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */
.ctt--mt-10 {
  margin-top: calc(var(--ctt-core-space-10) * -1) !important;
} /* → -40px */
.ctt--mt-12 {
  margin-top: calc(var(--ctt-core-space-12) * -1) !important;
} /* → -48px */

/* Negative margin - Right */
.ctt--mr-1 {
  margin-right: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mr-2 {
  margin-right: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mr-3 {
  margin-right: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mr-4 {
  margin-right: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mr-6 {
  margin-right: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mr-8 {
  margin-right: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* Negative margin - Bottom */
.ctt--mb-1 {
  margin-bottom: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mb-2 {
  margin-bottom: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mb-3 {
  margin-bottom: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mb-4 {
  margin-bottom: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mb-6 {
  margin-bottom: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mb-8 {
  margin-bottom: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */
.ctt--mb-10 {
  margin-bottom: calc(var(--ctt-core-space-10) * -1) !important;
} /* → -40px */
.ctt--mb-12 {
  margin-bottom: calc(var(--ctt-core-space-12) * -1) !important;
} /* → -48px */

/* Negative margin - Left */
.ctt--ml-1 {
  margin-left: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--ml-2 {
  margin-left: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--ml-3 {
  margin-left: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--ml-4 {
  margin-left: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--ml-6 {
  margin-left: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--ml-8 {
  margin-left: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* ==========================================================================
   GAP UTILITIES (for Flexbox and Grid Layouts)
   ========================================================================== */
/*
 * Gap utilities control spacing between grid/flexbox items without using margins.
 * These are particularly useful for responsive layouts and modern CSS grid/flexbox patterns.
 * 
 * Usage:
 *   .ctt-gap-{size}    → gap (both row and column)
 *   .ctt-gap-x-{size}  → column-gap (horizontal spacing)
 *   .ctt-gap-y-{size}  → row-gap (vertical spacing)
 */

/* Gap - Both directions (row and column) */
.ctt-gap-0 {
  gap: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-gap-1 {
  gap: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-gap-2 {
  gap: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-gap-3 {
  gap: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-gap-4 {
  gap: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-gap-6 {
  gap: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-gap-8 {
  gap: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-gap-10 {
  gap: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-gap-12 {
  gap: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-gap-16 {
  gap: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-gap-20 {
  gap: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Column gap - Horizontal spacing between columns */
.ctt-gap-x-0 {
  column-gap: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-gap-x-1 {
  column-gap: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-gap-x-2 {
  column-gap: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-gap-x-3 {
  column-gap: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-gap-x-4 {
  column-gap: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-gap-x-6 {
  column-gap: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-gap-x-8 {
  column-gap: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-gap-x-10 {
  column-gap: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-gap-x-12 {
  column-gap: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-gap-x-16 {
  column-gap: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-gap-x-20 {
  column-gap: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Row gap - Vertical spacing between rows */
.ctt-gap-y-0 {
  row-gap: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-gap-y-1 {
  row-gap: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-gap-y-2 {
  row-gap: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-gap-y-3 {
  row-gap: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-gap-y-4 {
  row-gap: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-gap-y-6 {
  row-gap: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-gap-y-8 {
  row-gap: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-gap-y-10 {
  row-gap: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-gap-y-12 {
  row-gap: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-gap-y-16 {
  row-gap: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-gap-y-20 {
  row-gap: var(--ctt-core-space-20) !important;
} /* → 80px */

/* ==========================================================================
   END OF SPACING UTILITIES
   ========================================================================== */


/* --- inlined: layout.css --- */
/**
 * CTT Design System - Layout Utility Classes
 * Layout utility classes for flexbox, grid, and positioning
 * 
 * Usage:
 * <div class="ctt-flex ctt-flex-col ctt-gap-4">Flex column with gap</div>
 * <div class="ctt-flex ctt-items-center ctt-justify-between">Flex row with alignment</div>
 */

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

.ctt-block {
  display: block !important;
}
.ctt-inline-block {
  display: inline-block !important;
}
.ctt-inline {
  display: inline !important;
}
.ctt-flex {
  display: flex !important;
}
.ctt-inline-flex {
  display: inline-flex !important;
}
.ctt-grid {
  display: grid !important;
}
.ctt-inline-grid {
  display: inline-grid !important;
}
.ctt-hidden {
  display: none !important;
}

/* ==========================================================================
   FLEXBOX DIRECTION UTILITIES
   ========================================================================== */

.ctt-flex-row {
  flex-direction: row !important;
}
.ctt-flex-row-reverse {
  flex-direction: row-reverse !important;
}
.ctt-flex-col {
  flex-direction: column !important;
}
.ctt-flex-col-reverse {
  flex-direction: column-reverse !important;
}

/* ==========================================================================
   FLEXBOX WRAP UTILITIES
   ========================================================================== */

.ctt-flex-wrap {
  flex-wrap: wrap !important;
}
.ctt-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.ctt-flex-nowrap {
  flex-wrap: nowrap !important;
}

/* ==========================================================================
   FLEX GROW/SHRINK/BASIS UTILITIES
   ========================================================================== */

.ctt-flex-1 {
  flex: 1 1 0% !important;
}
.ctt-flex-auto {
  flex: 1 1 auto !important;
}
.ctt-flex-initial {
  flex: 0 1 auto !important;
}
.ctt-flex-none {
  flex: none !important;
}

.ctt-flex-grow {
  flex-grow: 1 !important;
}
.ctt-flex-grow-0 {
  flex-grow: 0 !important;
}

.ctt-flex-shrink {
  flex-shrink: 1 !important;
}
.ctt-flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* ==========================================================================
   ALIGN ITEMS UTILITIES
   ========================================================================== */

.ctt-items-start {
  align-items: flex-start !important;
}
.ctt-items-end {
  align-items: flex-end !important;
}
.ctt-items-center {
  align-items: center !important;
}
.ctt-items-baseline {
  align-items: baseline !important;
}
.ctt-items-stretch {
  align-items: stretch !important;
}

/* ==========================================================================
   ALIGN CONTENT UTILITIES
   ========================================================================== */

.ctt-content-center {
  align-content: center !important;
}
.ctt-content-start {
  align-content: flex-start !important;
}
.ctt-content-end {
  align-content: flex-end !important;
}
.ctt-content-between {
  align-content: space-between !important;
}
.ctt-content-around {
  align-content: space-around !important;
}
.ctt-content-evenly {
  align-content: space-evenly !important;
}

/* ==========================================================================
   ALIGN SELF UTILITIES
   ========================================================================== */

.ctt-self-auto {
  align-self: auto !important;
}
.ctt-self-start {
  align-self: flex-start !important;
}
.ctt-self-end {
  align-self: flex-end !important;
}
.ctt-self-center {
  align-self: center !important;
}
.ctt-self-stretch {
  align-self: stretch !important;
}
.ctt-self-baseline {
  align-self: baseline !important;
}

/* ==========================================================================
   JUSTIFY CONTENT UTILITIES
   ========================================================================== */

.ctt-justify-start {
  justify-content: flex-start !important;
}
.ctt-justify-end {
  justify-content: flex-end !important;
}
.ctt-justify-center {
  justify-content: center !important;
}
.ctt-justify-between {
  justify-content: space-between !important;
}
.ctt-justify-around {
  justify-content: space-around !important;
}
.ctt-justify-evenly {
  justify-content: space-evenly !important;
}

/* ==========================================================================
   JUSTIFY ITEMS UTILITIES
   ========================================================================== */

.ctt-justify-items-start {
  justify-items: start !important;
}
.ctt-justify-items-end {
  justify-items: end !important;
}
.ctt-justify-items-center {
  justify-items: center !important;
}
.ctt-justify-items-stretch {
  justify-items: stretch !important;
}

/* ==========================================================================
   JUSTIFY SELF UTILITIES
   ========================================================================== */

.ctt-justify-self-auto {
  justify-self: auto !important;
}
.ctt-justify-self-start {
  justify-self: start !important;
}
.ctt-justify-self-end {
  justify-self: end !important;
}
.ctt-justify-self-center {
  justify-self: center !important;
}
.ctt-justify-self-stretch {
  justify-self: stretch !important;
}

/* ==========================================================================
   GAP UTILITIES (for flexbox and grid)
   ========================================================================== */

.ctt-gap-0 {
  gap: var(--ctt-core-space-0) !important;
}
.ctt-gap-1 {
  gap: var(--ctt-core-space-1) !important;
} /* 4px */
.ctt-gap-2 {
  gap: var(--ctt-core-space-2) !important;
} /* 8px */
.ctt-gap-3 {
  gap: var(--ctt-core-space-3) !important;
} /* 12px */
.ctt-gap-4 {
  gap: var(--ctt-core-space-4) !important;
} /* 16px */
.ctt-gap-6 {
  gap: var(--ctt-core-space-6) !important;
} /* 24px */
.ctt-gap-8 {
  gap: var(--ctt-core-space-8) !important;
} /* 32px */
.ctt-gap-10 {
  gap: var(--ctt-core-space-10) !important;
} /* 40px */
.ctt-gap-12 {
  gap: var(--ctt-core-space-12) !important;
} /* 48px */
.ctt-gap-16 {
  gap: var(--ctt-core-space-16) !important;
} /* 64px */
.ctt-gap-20 {
  gap: var(--ctt-core-space-20) !important;
} /* 80px */

/* Row gap utilities */
.ctt-gap-y-0 {
  row-gap: var(--ctt-core-space-0) !important;
}
.ctt-gap-y-1 {
  row-gap: var(--ctt-core-space-1) !important;
}
.ctt-gap-y-2 {
  row-gap: var(--ctt-core-space-2) !important;
}
.ctt-gap-y-3 {
  row-gap: var(--ctt-core-space-3) !important;
}
.ctt-gap-y-4 {
  row-gap: var(--ctt-core-space-4) !important;
}
.ctt-gap-y-6 {
  row-gap: var(--ctt-core-space-6) !important;
}
.ctt-gap-y-8 {
  row-gap: var(--ctt-core-space-8) !important;
}
.ctt-gap-y-10 {
  row-gap: var(--ctt-core-space-10) !important;
}
.ctt-gap-y-12 {
  row-gap: var(--ctt-core-space-12) !important;
}
.ctt-gap-y-16 {
  row-gap: var(--ctt-core-space-16) !important;
}
.ctt-gap-y-20 {
  row-gap: var(--ctt-core-space-20) !important;
}

/* Column gap utilities */
.ctt-gap-x-0 {
  column-gap: var(--ctt-core-space-0) !important;
}
.ctt-gap-x-1 {
  column-gap: var(--ctt-core-space-1) !important;
}
.ctt-gap-x-2 {
  column-gap: var(--ctt-core-space-2) !important;
}
.ctt-gap-x-3 {
  column-gap: var(--ctt-core-space-3) !important;
}
.ctt-gap-x-4 {
  column-gap: var(--ctt-core-space-4) !important;
}
.ctt-gap-x-6 {
  column-gap: var(--ctt-core-space-6) !important;
}
.ctt-gap-x-8 {
  column-gap: var(--ctt-core-space-8) !important;
}
.ctt-gap-x-10 {
  column-gap: var(--ctt-core-space-10) !important;
}
.ctt-gap-x-12 {
  column-gap: var(--ctt-core-space-12) !important;
}
.ctt-gap-x-16 {
  column-gap: var(--ctt-core-space-16) !important;
}
.ctt-gap-x-20 {
  column-gap: var(--ctt-core-space-20) !important;
}

/* ==========================================================================
   GRID COLUMN UTILITIES
   ========================================================================== */
.ctt-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.ctt-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ctt-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ctt-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* ==========================================================================
   WIDTH AND HEIGHT UTILITIES
   ========================================================================== */

.ctt-w-auto {
  width: auto !important;
}
.ctt-w-full {
  width: 100% !important;
}
.ctt-w-screen {
  width: 100vw !important;
}
.ctt-w-min {
  width: min-content !important;
}
.ctt-w-max {
  width: max-content !important;
}
.ctt-w-fit {
  width: fit-content !important;
}

.ctt-h-auto {
  height: auto !important;
}
.ctt-h-full {
  height: 100% !important;
}
.ctt-h-screen {
  height: 100vh !important;
}
.ctt-h-min {
  height: min-content !important;
}
.ctt-h-max {
  height: max-content !important;
}
.ctt-h-fit {
  height: fit-content !important;
}

/* ==========================================================================
   MIN/MAX WIDTH AND HEIGHT UTILITIES
   ========================================================================== */

.ctt-min-w-0 {
  min-width: 0 !important;
}
.ctt-min-w-full {
  min-width: 100% !important;
}
.ctt-min-w-min {
  min-width: min-content !important;
}
.ctt-min-w-max {
  min-width: max-content !important;
}
.ctt-min-w-fit {
  min-width: fit-content !important;
}

.ctt-max-w-none {
  max-width: none !important;
}
.ctt-max-w-full {
  max-width: 100% !important;
}
.ctt-max-w-min {
  max-width: min-content !important;
}
.ctt-max-w-max {
  max-width: max-content !important;
}
.ctt-max-w-fit {
  max-width: fit-content !important;
}
.ctt-max-w-xs {
  max-width: 320px !important;
}
.ctt-max-w-sm {
  max-width: 384px !important;
}
.ctt-max-w-md {
  max-width: 448px !important;
}
.ctt-max-w-lg {
  max-width: 512px !important;
}
.ctt-max-w-xl {
  max-width: 576px !important;
}
.ctt-max-w-2xl {
  max-width: 672px !important;
}
.ctt-max-w-3xl {
  max-width: 768px !important;
}
.ctt-max-w-4xl {
  max-width: 896px !important;
}
.ctt-max-w-5xl {
  max-width: 1024px !important;
}
.ctt-max-w-6xl {
  max-width: 1152px !important;
}
.ctt-max-w-7xl {
  max-width: 1280px !important;
}

.ctt-min-h-0 {
  min-height: 0 !important;
}
.ctt-min-h-full {
  min-height: 100% !important;
}
.ctt-min-h-screen {
  min-height: 100vh !important;
}

.ctt-max-h-full {
  max-height: 100% !important;
}
.ctt-max-h-screen {
  max-height: 100vh !important;
}

/* ==========================================================================
   POSITION UTILITIES
   ========================================================================== */

.ctt-static {
  position: static !important;
}
.ctt-fixed {
  position: fixed !important;
}
.ctt-absolute {
  position: absolute !important;
}
.ctt-relative {
  position: relative !important;
}
.ctt-sticky {
  position: sticky !important;
}

/* ==========================================================================
   OVERFLOW UTILITIES
   ========================================================================== */

.ctt-overflow-auto {
  overflow: auto !important;
}
.ctt-overflow-hidden {
  overflow: hidden !important;
}
.ctt-overflow-clip {
  overflow: clip !important;
}
.ctt-overflow-visible {
  overflow: visible !important;
}
.ctt-overflow-scroll {
  overflow: scroll !important;
}

.ctt-overflow-x-auto {
  overflow-x: auto !important;
}
.ctt-overflow-x-hidden {
  overflow-x: hidden !important;
}
.ctt-overflow-x-clip {
  overflow-x: clip !important;
}
.ctt-overflow-x-visible {
  overflow-x: visible !important;
}
.ctt-overflow-x-scroll {
  overflow-x: scroll !important;
}

.ctt-overflow-y-auto {
  overflow-y: auto !important;
}
.ctt-overflow-y-hidden {
  overflow-y: hidden !important;
}
.ctt-overflow-y-clip {
  overflow-y: clip !important;
}
.ctt-overflow-y-visible {
  overflow-y: visible !important;
}
.ctt-overflow-y-scroll {
  overflow-y: scroll !important;
}


/* ========================================================================
   6. ICON CLASSES - Icon definitions
   ======================================================================== */

/* --- inlined: icons-classes.css --- */
/**
 * CTT Icon Classes Only (for component imports)
 * 
 * This file contains only the icon classes without @font-face declarations.
 * The @font-face declarations are imported globally in the main icons.css file.
 * 
 * This file is meant to be imported inline into web components.
 */

/* Base Icon Class base */
[class^='ctt-icon-'],
[class*=' ctt-icon-'] {
  font-family: 'ctt-icons' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Individual Icon Classes */

.ctt-icon-refresh:before {
  content: '\e800';
}

.ctt-icon-qrcode-scan:before {
  content: '\e801';
}

.ctt-icon-rotate:before {
  content: '\e802';
}

.ctt-icon-save:before {
  content: '\e803';
}

.ctt-icon-schedule_send:before {
  content: '\e804';
}

.ctt-icon-search:before {
  content: '\e805';
}

.ctt-icon-reply:before {
  content: '\e806';
}

.ctt-icon-send:before {
  content: '\e807';
}

.ctt-icon-share:before {
  content: '\e808';
}

.ctt-icon-stop:before {
  content: '\e809';
}

.ctt-icon-upload:before {
  content: '\e80a';
}

.ctt-icon-add-person:before {
  content: '\e80b';
}

.ctt-icon-add-person-disabled:before {
  content: '\e80c';
}

.ctt-icon-attach:before {
  content: '\e80d';
}

.ctt-icon-block:before {
  content: '\e80e';
}

.ctt-icon-cancel:before {
  content: '\e80f';
}

.ctt-icon-close:before {
  content: '\e810';
}

.ctt-icon-collapse:before {
  content: '\e811';
}

.ctt-icon-configurations:before {
  content: '\e812';
}

.ctt-icon-delete:before {
  content: '\e813';
}

.ctt-icon-download:before {
  content: '\e814';
}

.ctt-icon-copy:before {
  content: '\e815';
}

.ctt-icon-duplicate:before {
  content: '\e816';
}

.ctt-icon-edit:before {
  content: '\e817';
}

.ctt-icon-edit-document:before {
  content: '\e818';
}

.ctt-icon-expand:before {
  content: '\e819';
}

.ctt-icon-drag:before {
  content: '\e81a';
}

.ctt-icon-eye-off:before {
  content: '\e81b';
}

.ctt-icon-eye-on:before {
  content: '\e81c';
}

.ctt-icon-file-export:before {
  content: '\e81d';
}

.ctt-icon-filter:before {
  content: '\e81e';
}

.ctt-icon-file-save:before {
  content: '\e81f';
}

.ctt-icon-import:before {
  content: '\e820';
}

.ctt-icon-login:before {
  content: '\e821';
}

.ctt-icon-not-found:before {
  content: '\e822';
}

.ctt-icon-pause:before {
  content: '\e823';
}

.ctt-icon-logout:before {
  content: '\e824';
}

.ctt-icon-play:before {
  content: '\e825';
}

.ctt-icon-person:before {
  content: '\e826';
}

.ctt-icon-print:before {
  content: '\e827';
}

.ctt-icon-arrow-up-down:before {
  content: '\e828';
}

.ctt-icon-chevron-down:before {
  content: '\e829';
}

.ctt-icon-chevron-right:before {
  content: '\e82a';
}

.ctt-icon-chevron-up-down:before {
  content: '\e82b';
}

.ctt-icon-double-chevron-right:before {
  content: '\e82c';
}

.ctt-icon-arrow-down:before {
  content: '\e82d';
}

.ctt-icon-chevron-left:before {
  content: '\e82e';
}

.ctt-icon-chevron-up:before {
  content: '\e82f';
}

.ctt-icon-directions:before {
  content: '\e830';
}

.ctt-icon-double-chevron-left:before {
  content: '\e831';
}

.ctt-icon-arrow-left:before {
  content: '\e832';
}

.ctt-icon-arrow-right:before {
  content: '\e833';
}

.ctt-icon-arrow-up:before {
  content: '\e834';
}

.ctt-icon-live_help:before {
  content: '\e835';
}

.ctt-icon-newsletter:before {
  content: '\e836';
}

.ctt-icon-mail:before {
  content: '\e837';
}

.ctt-icon-notification:before {
  content: '\e838';
}

.ctt-icon-notification-filled:before {
  content: '\e839';
}

.ctt-icon-outbox:before {
  content: '\e83a';
}

.ctt-icon-robot:before {
  content: '\e83b';
}

.ctt-icon-chat:before {
  content: '\e83c';
}

.ctt-icon-email:before {
  content: '\e83d';
}

.ctt-icon-phone_enabled:before {
  content: '\e83e';
}

.ctt-icon-inbox:before {
  content: '\e83f';
}

.ctt-icon-customs:before {
  content: '\e840';
}

.ctt-icon-fragile:before {
  content: '\e841';
}

.ctt-icon-local-shipping:before {
  content: '\e842';
}

.ctt-icon-locker:before {
  content: '\e843';
}

.ctt-icon-locker-private:before {
  content: '\e844';
}

.ctt-icon-payshop:before {
  content: '\e845';
}

.ctt-icon-multiguide-product:before {
  content: '\e846';
}

.ctt-icon-stamp:before {
  content: '\e847';
}

.ctt-icon-storefront:before {
  content: '\e848';
}

.ctt-icon-weight:before {
  content: '\e849';
}

.ctt-icon-box-check:before {
  content: '\e84a';
}

.ctt-icon-box-cross:before {
  content: '\e84b';
}

.ctt-icon-box-export:before {
  content: '\e84c';
}

.ctt-icon-box-import:before {
  content: '\e84d';
}

.ctt-icon-box-location:before {
  content: '\e84e';
}

.ctt-icon-box-options:before {
  content: '\e84f';
}

.ctt-icon-box-money:before {
  content: '\e850';
}

.ctt-icon-box-return:before {
  content: '\e851';
}

.ctt-icon-box-shield:before {
  content: '\e852';
}

.ctt-icon-box-shoes:before {
  content: '\e853';
}

.ctt-icon-post-office:before {
  content: '\e854';
}

.ctt-icon-box:before {
  content: '\e855';
}

.ctt-icon-ctt-bank:before {
  content: '\e856';
}

.ctt-icon-ctt-circle:before {
  content: '\e857';
}

.ctt-icon-ctt-logo:before {
  content: '\e858';
}

.ctt-icon-box-clock:before {
  content: '\e859';
}

.ctt-icon-box-hand:before {
  content: '\e85a';
}

.ctt-icon-box-star:before {
  content: '\e85b';
}

.ctt-icon-ctt-circle-filled:before {
  content: '\e85c';
}

.ctt-icon-folder:before {
  content: '\e85d';
}

.ctt-icon-receipt-off:before {
  content: '\e85e';
}

.ctt-icon-signature:before {
  content: '\e85f';
}

.ctt-icon-assignment:before {
  content: '\e860';
}

.ctt-icon-drafts:before {
  content: '\e861';
}

.ctt-icon-envelope-letter:before {
  content: '\e862';
}

.ctt-icon-receipt:before {
  content: '\e863';
}

.ctt-icon-letter:before {
  content: '\e864';
}

.ctt-icon-refund:before {
  content: '\e865';
}

.ctt-icon-money-off:before {
  content: '\e866';
}

.ctt-icon-money-filled:before {
  content: '\e867';
}

.ctt-icon-savings:before {
  content: '\e868';
}

.ctt-icon-wallet:before {
  content: '\e869';
}

.ctt-icon-savings-filled:before {
  content: '\e86a';
}

.ctt-icon-amount:before {
  content: '\e86b';
}

.ctt-icon-money:before {
  content: '\e86c';
}

.ctt-icon-top-up:before {
  content: '\e86d';
}

.ctt-icon-card:before {
  content: '\e86e';
}

.ctt-icon-bank:before {
  content: '\e86f';
}

.ctt-icon-info:before {
  content: '\e870';
}

.ctt-icon-warning:before {
  content: '\e871';
}

.ctt-icon-help:before {
  content: '\e872';
}

.ctt-icon-error:before {
  content: '\e873';
}

.ctt-icon-no-image:before {
  content: '\e874';
}

.ctt-icon-plane:before {
  content: '\e875';
}

.ctt-icon-security-shield:before {
  content: '\e876';
}

.ctt-icon-speed-score:before {
  content: '\e877';
}

.ctt-icon-support:before {
  content: '\e878';
}

.ctt-icon-ticket:before {
  content: '\e879';
}

.ctt-icon-toolbox:before {
  content: '\e87a';
}

.ctt-icon-tools:before {
  content: '\e87b';
}

.ctt-icon-train:before {
  content: '\e87c';
}

.ctt-icon-ai:before {
  content: '\e87d';
}

.ctt-icon-apps:before {
  content: '\e87e';
}

.ctt-icon-book:before {
  content: '\e87f';
}

.ctt-icon-camera:before {
  content: '\e880';
}

.ctt-icon-car:before {
  content: '\e881';
}

.ctt-icon-chart:before {
  content: '\e882';
}

.ctt-icon-devices:before {
  content: '\e883';
}

.ctt-icon-eco:before {
  content: '\e884';
}

.ctt-icon-company:before {
  content: '\e885';
}

.ctt-icon-hotel:before {
  content: '\e886';
}

.ctt-icon-image:before {
  content: '\e887';
}

.ctt-icon-line-chart:before {
  content: '\e888';
}

.ctt-icon-hourglass:before {
  content: '\e889';
}

.ctt-icon-menu:before {
  content: '\e88a';
}

.ctt-icon-more-vert:before {
  content: '\e88b';
}

.ctt-icon-plus:before {
  content: '\e88c';
}

.ctt-icon-more-horiz:before {
  content: '\e88d';
}

.ctt-icon-minus:before {
  content: '\e88e';
}

.ctt-icon-settings:before {
  content: '\e88f';
}

.ctt-icon-suggestion:before {
  content: '\e890';
}

.ctt-icon-touch-id:before {
  content: '\e891';
}

.ctt-icon-wheelchair:before {
  content: '\e892';
}

.ctt-icon-pin:before {
  content: '\e893';
}

.ctt-icon-progress-activity:before {
  content: '\e894';
}

.ctt-icon-accessibility:before {
  content: '\e895';
}

.ctt-icon-bookmark:before {
  content: '\e896';
}

.ctt-icon-touch-id-off:before {
  content: '\e897';
}

.ctt-icon-calendar:before {
  content: '\e898';
}

.ctt-icon-check:before {
  content: '\e899';
}

.ctt-icon-check-circle:before {
  content: '\e89a';
}

.ctt-icon-checkoff:before {
  content: '\e89b';
}

.ctt-icon-clock:before {
  content: '\e89c';
}

.ctt-icon-dock-to-bottom:before {
  content: '\e89d';
}

.ctt-icon-dock-to-right:before {
  content: '\e89e';
}

.ctt-icon-dock-to-right-1:before {
  content: '\e89f';
}

.ctt-icon-external-link:before {
  content: '\e8a0';
}

.ctt-icon-face-id:before {
  content: '\e8a1';
}

.ctt-icon-flag:before {
  content: '\e8a2';
}

.ctt-icon-flag-off:before {
  content: '\e8a3';
}

.ctt-icon-home:before {
  content: '\e8a4';
}

.ctt-icon-history:before {
  content: '\e8a5';
}

.ctt-icon-home-filled:before {
  content: '\e8a6';
}

.ctt-icon-layout:before {
  content: '\e8a7';
}

.ctt-icon-lock:before {
  content: '\e8a8';
}

.ctt-icon-map-cp:before {
  content: '\e8a9';
}

.ctt-icon-match-case:before {
  content: '\e8aa';
}

.ctt-icon-location-fixed:before {
  content: '\e8ab';
}

.ctt-icon-my-location:before {
  content: '\e8ac';
}

.ctt-icon-national:before {
  content: '\e8ad';
}

.ctt-icon-portugal-continental:before {
  content: '\e8ae';
}

.ctt-icon-globe:before {
  content: '\e8af';
}

.ctt-icon-location:before {
  content: '\e8b0';
}

.ctt-icon-iberia:before {
  content: '\e8b1';
}

.ctt-icon-sell:before {
  content: '\e8b2';
}

.ctt-icon-shipping:before {
  content: '\e8b3';
}

.ctt-icon-shipping-fill:before {
  content: '\e8b4';
}

.ctt-icon-shopping-bag:before {
  content: '\e8b5';
}

.ctt-icon-verified:before {
  content: '\e8b6';
}

.ctt-icon-barcode:before {
  content: '\e8b7';
}

.ctt-icon-barcode-scanner:before {
  content: '\e8b8';
}

.ctt-icon-car-toll:before {
  content: '\e8b9';
}

.ctt-icon-instagram:before {
  content: '\e8ba';
}

.ctt-icon-linux:before {
  content: '\e8bb';
}

.ctt-icon-star:before {
  content: '\e8bc';
}

.ctt-icon-star-filled:before {
  content: '\e8bd';
}

.ctt-icon-user-group:before {
  content: '\e8be';
}

.ctt-icon-windows:before {
  content: '\e8bf';
}

.ctt-icon-linkedin:before {
  content: '\e8c0';
}

.ctt-icon-youtube:before {
  content: '\e8c1';
}

.ctt-icon-account-circle:before {
  content: '\e8c2';
}

.ctt-icon-apple:before {
  content: '\e8c3';
}

.ctt-icon-facebook:before {
  content: '\e8c4';
}

.ctt-icon-heart:before {
  content: '\e8c5';
}

.ctt-icon-heart-filled:before {
  content: '\e8c6';
}

/* Size Variants - Using design system icon tokens */
.ctt-icon--small {
  font-size: var(--ctt-icon-size-s, 14px);
}

.ctt-icon--medium {
  font-size: var(--ctt-icon-size-m, 16px);
}

.ctt-icon--large {
  font-size: var(--ctt-icon-size-2xl, 24px);
}

.ctt-icon--xlarge {
  font-size: var(--ctt-icon-size-4xl, 32px);
}

/* Color Modifiers - Using design system icon tokens */
.ctt-icon--primary {
  color: var(--ctt-icon-color-primary, var(--ctt-core-color-primary-main));
}

.ctt-icon--secondary {
  color: var(--ctt-icon-color-secondary, var(--ctt-core-color-secondary-main));
}

.ctt-icon--success {
  color: var(--ctt-icon-color-success, var(--ctt-core-color-success-main));
}

.ctt-icon--warning {
  color: var(--ctt-icon-color-warning, var(--ctt-core-color-warning-main));
}

.ctt-icon--error {
  color: var(--ctt-icon-color-error, var(--ctt-base-text-negative));
}

.ctt-icon--info {
  color: var(--ctt-icon-color-info, var(--ctt-core-color-informative-main));
}

.ctt-icon--neutral {
  color: var(--ctt-icon-color-neutral, var(--ctt-core-color-neutral-700));
}

.ctt-icon--white {
  color: var(--ctt-icon-color-white, var(--ctt-core-color-neutral-100));
}

/* Rotation Modifiers */
.ctt-icon--rotate-90 {
  transform: rotate(90deg);
}

.ctt-icon--rotate-180 {
  transform: rotate(180deg);
}

.ctt-icon--rotate-270 {
  transform: rotate(270deg);
}

/* Animation Modifiers */
.ctt-icon--spin {
  animation: ctt-icon-spin 2s linear infinite;
}

.ctt-icon--pulse {
  animation: ctt-icon-pulse 2s ease-in-out infinite;
}

@keyframes ctt-icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ctt-icon-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}


/* ========================================================================
   7. UTILITIES - Advanced utilities (borders, shadows, transitions, etc.)
   ======================================================================== */

/* --- inlined: utilities.css --- */
/**
 * ============================================================================
 * CTT DESIGN SYSTEM - COMPREHENSIVE UTILITY CLASSES
 * ============================================================================
 * 
 * Complete utility class system built on CTT design tokens.
 * All utilities use BASE TOKENS to ensure consistency and maintainability.
 * 
 * Token Hierarchy:
 * Brand Tokens → Core Tokens → Base Tokens → Utility Classes
 * 
 * This file provides utilities for:
 * - Borders (color, style, radius, width)
 * - Shadows and elevation
 * - Opacity and transparency
 * - Sizing (width, height, sizing scales)
 * - Aspect ratios
 * - Transitions and animations
 * - Cursor and pointer events
 * - Text properties
 * - Visibility and display utilities
 * - Z-index layering
 * - Additional compositional utilities
 * 
 * ============================================================================
 */

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

/* Semantic border colors */
.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-negative {
  border-color: var(--ctt-base-border-negative) !important;
}

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

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

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

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

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

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

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

/* Direct color scale borders */
.ctt-border-primary-50 {
  border-color: var(--ctt-core-color-primary-50) !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-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-500 {
  border-color: var(--ctt-core-color-neutral-500) !important;
}

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

/* ==========================================================================
   BORDER STYLE UTILITIES
   ========================================================================== */

.ctt-border-solid {
  border-style: solid !important;
}

.ctt-border-dashed {
  border-style: dashed !important;
}

.ctt-border-dotted {
  border-style: dotted !important;
}

.ctt-border-double {
  border-style: double !important;
}

.ctt-border-none {
  border-style: none !important;
}

/* ==========================================================================
   BORDER WIDTH UTILITIES (Using Core Border Width Tokens)
   ========================================================================== */

/* All sides border width */
.ctt-border-0 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-1 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-2 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-3 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-thick) !important;
}

/* Individual sides border width */
.ctt-border-t-0 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-t-1 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-t-2 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-t-3 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-r-0 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-none) !important;
}

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

.ctt-border-r-2 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-r-3 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-b-0 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-none) !important;
}

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

.ctt-border-b-2 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-b-3 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-l-0 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-none) !important;
}

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

.ctt-border-l-2 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-l-3 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thick) !important;
}

/* Horizontal and border-style: solid ; vertical borders */
.ctt-border-x-0 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-none) !important;
  border-right-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-x-1 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-hairline) !important;
  border-right-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-x-2 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thin) !important;
  border-right-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-x-3 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thick) !important;
  border-right-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-y-0 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-none) !important;
  border-bottom-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-y-1 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-hairline) !important;
  border-bottom-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-y-2 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thin) !important;
  border-bottom-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-y-3 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thick) !important;
  border-bottom-width: var(--ctt-core-border-width-thick) !important;
}

/* ==========================================================================
   BORDER RADIUS UTILITIES (Using Core Radius Tokens)
   ========================================================================== */

/* All corners */
.ctt-rounded-0 {
  border-radius: var(--ctt-core-radius-none) !important;
}

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

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

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

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

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

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

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

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

/* Individual corners - Top Left */
.ctt-rounded-tl-0 {
  border-top-left-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-tl-xs {
  border-top-left-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-tl-sm {
  border-top-left-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-tl-md {
  border-top-left-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-tl-lg {
  border-top-left-radius: var(--ctt-core-radius-lg) !important;
}

/* Individual corners - Top Right */
.ctt-rounded-tr-0 {
  border-top-right-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-tr-xs {
  border-top-right-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-tr-sm {
  border-top-right-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-tr-md {
  border-top-right-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-tr-lg {
  border-top-right-radius: var(--ctt-core-radius-lg) !important;
}

/* Individual corners - Bottom Left */
.ctt-rounded-bl-0 {
  border-bottom-left-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-bl-xs {
  border-bottom-left-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-bl-sm {
  border-bottom-left-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-bl-md {
  border-bottom-left-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-bl-lg {
  border-bottom-left-radius: var(--ctt-core-radius-lg) !important;
}

/* Individual corners - Bottom Right */
.ctt-rounded-br-0 {
  border-bottom-right-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-br-xs {
  border-bottom-right-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-br-sm {
  border-bottom-right-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-br-md {
  border-bottom-right-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-br-lg {
  border-bottom-right-radius: var(--ctt-core-radius-lg) !important;
}

/* Top sides */
.ctt-rounded-t-0 {
  border-top-left-radius: var(--ctt-core-radius-none) !important;
  border-top-right-radius: var(--ctt-core-radius-none) !important;
}

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

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

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

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

/* Bottom sides */
.ctt-rounded-b-0 {
  border-bottom-left-radius: var(--ctt-core-radius-none) !important;
  border-bottom-right-radius: var(--ctt-core-radius-none) !important;
}

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

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

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

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

/* ==========================================================================
   SHADOW UTILITIES (Using Base Tokens)
   ========================================================================== */

/* No shadow */
.ctt-shadow-none {
  box-shadow: none !important;
}

/* Subtle shadow - elevated elements */
.ctt-shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Medium shadow - interactive elements, cards */
.ctt-shadow-md {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Large shadow - modals, tooltips */
.ctt-shadow-lg {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Extra large shadow - dropdowns, popovers */
.ctt-shadow-xl {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Extra extra large shadow - floating panels */
.ctt-shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Focus shadow - keyboard navigation */
.ctt-shadow-focus {
  box-shadow: 0 0 0 3px var(--ctt-base-border-focus) !important;
}

/* Inset shadow */
.ctt-shadow-inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   OPACITY UTILITIES
   ========================================================================== */

.ctt-opacity-0 {
  opacity: 0 !important;
}

.ctt-opacity-5 {
  opacity: 0.05 !important;
}

.ctt-opacity-10 {
  opacity: 0.1 !important;
}

.ctt-opacity-20 {
  opacity: 0.2 !important;
}

.ctt-opacity-25 {
  opacity: 0.25 !important;
}

.ctt-opacity-30 {
  opacity: 0.3 !important;
}

.ctt-opacity-40 {
  opacity: 0.4 !important;
}

.ctt-opacity-50 {
  opacity: 0.5 !important;
}

.ctt-opacity-60 {
  opacity: 0.6 !important;
}

.ctt-opacity-70 {
  opacity: 0.7 !important;
}

.ctt-opacity-75 {
  opacity: 0.75 !important;
}

.ctt-opacity-80 {
  opacity: 0.8 !important;
}

.ctt-opacity-90 {
  opacity: 0.9 !important;
}

.ctt-opacity-95 {
  opacity: 0.95 !important;
}

.ctt-opacity-100 {
  opacity: 1 !important;
}

/* ==========================================================================
   SIZING UTILITIES (Using Core Space and Size Tokens)
   ========================================================================== */

/* Width sizing */
.ctt-w-0 {
  width: var(--ctt-core-space-0) !important;
}

.ctt-w-1 {
  width: var(--ctt-core-space-1) !important;
}

.ctt-w-2 {
  width: var(--ctt-core-space-2) !important;
}

.ctt-w-3 {
  width: var(--ctt-core-space-3) !important;
}

.ctt-w-4 {
  width: var(--ctt-core-space-4) !important;
}

.ctt-w-6 {
  width: var(--ctt-core-space-6) !important;
}

.ctt-w-8 {
  width: var(--ctt-core-space-8) !important;
}

.ctt-w-10 {
  width: var(--ctt-core-space-10) !important;
}

.ctt-w-12 {
  width: var(--ctt-core-space-12) !important;
}

/* Height sizing */
.ctt-h-0 {
  height: var(--ctt-core-space-0) !important;
}

.ctt-h-1 {
  height: var(--ctt-core-space-1) !important;
}

.ctt-h-2 {
  height: var(--ctt-core-space-2) !important;
}

.ctt-h-3 {
  height: var(--ctt-core-space-3) !important;
}

.ctt-h-4 {
  height: var(--ctt-core-space-4) !important;
}

.ctt-h-6 {
  height: var(--ctt-core-space-6) !important;
}

.ctt-h-8 {
  height: var(--ctt-core-space-8) !important;
}

.ctt-h-10 {
  height: var(--ctt-core-space-10) !important;
}

.ctt-h-12 {
  height: var(--ctt-core-space-12) !important;
}

/* Icon size utilities */
.ctt-icon-xs {
  width: var(--ctt-core-size-icon-xs) !important;
  height: var(--ctt-core-size-icon-xs) !important;
}

.ctt-icon-s {
  width: var(--ctt-core-size-icon-s) !important;
  height: var(--ctt-core-size-icon-s) !important;
}

.ctt-icon-m {
  width: var(--ctt-core-size-icon-m) !important;
  height: var(--ctt-core-size-icon-m) !important;
}

.ctt-icon-l {
  width: var(--ctt-core-size-icon-l) !important;
  height: var(--ctt-core-size-icon-l) !important;
}

.ctt-icon-xl {
  width: var(--ctt-core-size-icon-xl) !important;
  height: var(--ctt-core-size-icon-xl) !important;
}

.ctt-icon-2xl {
  width: var(--ctt-core-size-icon-2xl) !important;
  height: var(--ctt-core-size-icon-2xl) !important;
}

.ctt-icon-3xl {
  width: var(--ctt-core-size-icon-3xl) !important;
  height: var(--ctt-core-size-icon-3xl) !important;
}

/* Control size utilities */
.ctt-control-xs {
  width: var(--ctt-core-size-control-xs) !important;
  height: var(--ctt-core-size-control-xs) !important;
}

.ctt-control-s {
  width: var(--ctt-core-size-control-s) !important;
  height: var(--ctt-core-size-control-s) !important;
}

.ctt-control-m {
  width: var(--ctt-core-size-control-m) !important;
  height: var(--ctt-core-size-control-m) !important;
}

.ctt-control-l {
  width: var(--ctt-core-size-control-l) !important;
  height: var(--ctt-core-size-control-l) !important;
}

.ctt-control-xl {
  width: var(--ctt-core-size-control-xl) !important;
  height: var(--ctt-core-size-control-xl) !important;
}

.ctt-control-2xl {
  width: var(--ctt-core-size-control-2xl) !important;
  height: var(--ctt-core-size-control-2xl) !important;
}

/* ==========================================================================
   ASPECT RATIO UTILITIES
   ========================================================================== */

.ctt-aspect-square {
  aspect-ratio: 1 / 1 !important;
}

.ctt-aspect-video {
  aspect-ratio: 16 / 9 !important;
}

.ctt-aspect-3-2 {
  aspect-ratio: 3 / 2 !important;
}

.ctt-aspect-4-3 {
  aspect-ratio: 4 / 3 !important;
}

.ctt-aspect-16-10 {
  aspect-ratio: 16 / 10 !important;
}

.ctt-aspect-auto {
  aspect-ratio: auto !important;
}

/* ==========================================================================
   TRANSITION AND ANIMATION UTILITIES
   ========================================================================== */

/* Transition timing */
.ctt-transition-none {
  transition: none !important;
}

.ctt-transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-colors {
  transition-property: background-color, border-color, color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-transform {
  transition-property: transform !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

/* Transition durations */
.ctt-duration-75 {
  transition-duration: 75ms !important;
}

.ctt-duration-100 {
  transition-duration: 100ms !important;
}

.ctt-duration-150 {
  transition-duration: 150ms !important;
}

.ctt-duration-200 {
  transition-duration: 200ms !important;
}

.ctt-duration-300 {
  transition-duration: 300ms !important;
}

.ctt-duration-500 {
  transition-duration: 500ms !important;
}

/* Transition timing functions */
.ctt-ease-linear {
  transition-timing-function: linear !important;
}

.ctt-ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
}

.ctt-ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}

.ctt-ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transform utilities for animations */
.ctt-scale-0 {
  transform: scale(0) !important;
}

.ctt-scale-50 {
  transform: scale(0.5) !important;
}

.ctt-scale-75 {
  transform: scale(0.75) !important;
}

.ctt-scale-90 {
  transform: scale(0.9) !important;
}

.ctt-scale-95 {
  transform: scale(0.95) !important;
}

.ctt-scale-100 {
  transform: scale(1) !important;
}

.ctt-scale-110 {
  transform: scale(1.1) !important;
}

.ctt-translate-x-0 {
  transform: translateX(0) !important;
}

.ctt-translate-y-0 {
  transform: translateY(0) !important;
}

.ctt-translate-x-1 {
  transform: translateX(var(--ctt-core-space-1)) !important;
}

.ctt-translate-y-1 {
  transform: translateY(var(--ctt-core-space-1)) !important;
}

.ctt--translate-x-1 {
  transform: translateX(calc(-1 * var(--ctt-core-space-1))) !important;
}

.ctt--translate-y-1 {
  transform: translateY(calc(-1 * var(--ctt-core-space-1))) !important;
}

.ctt-rotate-0 {
  transform: rotate(0deg) !important;
}

.ctt-rotate-90 {
  transform: rotate(90deg) !important;
}

.ctt-rotate-180 {
  transform: rotate(180deg) !important;
}

.ctt--rotate-90 {
  transform: rotate(-90deg) !important;
}

/* ==========================================================================
   CURSOR AND POINTER UTILITIES
   ========================================================================== */

.ctt-cursor-auto {
  cursor: auto !important;
}

.ctt-cursor-default {
  cursor: default !important;
}

.ctt-cursor-pointer {
  cursor: pointer !important;
}

.ctt-cursor-wait {
  cursor: wait !important;
}

.ctt-cursor-text {
  cursor: text !important;
}

.ctt-cursor-move {
  cursor: move !important;
}

.ctt-cursor-help {
  cursor: help !important;
}

.ctt-cursor-not-allowed {
  cursor: not-allowed !important;
}

.ctt-cursor-grab {
  cursor: grab !important;
}

.ctt-cursor-grabbing {
  cursor: grabbing !important;
}

.ctt-pointer-events-none {
  pointer-events: none !important;
}

.ctt-pointer-events-auto {
  pointer-events: auto !important;
}

/* ==========================================================================
   USER SELECT UTILITIES
   ========================================================================== */

.ctt-select-none {
  user-select: none !important;
}

.ctt-select-text {
  user-select: text !important;
}

.ctt-select-all {
  user-select: all !important;
}

.ctt-select-auto {
  user-select: auto !important;
}

/* ==========================================================================
   Z-INDEX UTILITIES
   ========================================================================== */

.ctt-z-0 {
  z-index: 0 !important;
}

.ctt-z-10 {
  z-index: 10 !important;
}

.ctt-z-20 {
  z-index: 20 !important;
}

.ctt-z-30 {
  z-index: 30 !important;
}

.ctt-z-40 {
  z-index: 40 !important;
}

.ctt-z-50 {
  z-index: 50 !important;
}

.ctt-z-auto {
  z-index: auto !important;
}

/* Modal and overlay z-indexes (higher values) */
.ctt-z-modal {
  z-index: 1000 !important;
}

.ctt-z-dropdown {
  z-index: 1100 !important;
}

.ctt-z-sticky {
  z-index: 1020 !important;
}

.ctt-z-fixed {
  z-index: 1030 !important;
}

.ctt-z-popover {
  z-index: 1040 !important;
}

.ctt-z-tooltip {
  z-index: 1050 !important;
}

/* ==========================================================================
   VISIBILITY UTILITIES
   ========================================================================== */

.ctt-visible {
  visibility: visible !important;
}

.ctt-invisible {
  visibility: hidden !important;
}

/* Visually hidden but accessible to screen readers */
.ctt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* ==========================================================================
   TEXT DECORATION UTILITIES
   ========================================================================== */

.ctt-underline {
  text-decoration: underline !important;
}

.ctt-overline {
  text-decoration: overline !important;
}

.ctt-line-through {
  text-decoration: line-through !important;
}

.ctt-no-underline {
  text-decoration: none !important;
}

/* Text decoration color */
.ctt-decoration-error {
  text-decoration-color: var(--ctt-base-border-error) !important;
}

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

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

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

/* ==========================================================================
   TEXT TRANSFORM UTILITIES
   ========================================================================== */

.ctt-uppercase {
  text-transform: uppercase !important;
}

.ctt-lowercase {
  text-transform: lowercase !important;
}

.ctt-capitalize {
  text-transform: capitalize !important;
}

.ctt-normal-case {
  text-transform: none !important;
}

/* ==========================================================================
   TEXT ALIGNMENT UTILITIES
   ========================================================================== */

.ctt-text-left {
  text-align: left !important;
}

.ctt-text-center {
  text-align: center !important;
}

.ctt-text-right {
  text-align: right !important;
}

.ctt-text-justify {
  text-align: justify !important;
}

/* ==========================================================================
   WORD BREAK AND OVERFLOW UTILITIES
   ========================================================================== */

.ctt-break-words {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.ctt-break-all {
  word-break: break-all !important;
}

.ctt-break-normal {
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.ctt-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ctt-line-clamp-1 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  overflow: hidden !important;
}

.ctt-line-clamp-2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

.ctt-line-clamp-3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

.ctt-line-clamp-none {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

.ctt-error-text {
  color: var(--ctt-error-text) !important;
  font-size: var(--ctt-error-text-font-size) !important;
  font-weight: var(--ctt-error-text-font-weight) !important;
  line-height: 1 !important;
}

.ctt-supporting-text {
  font-size: var(--ctt-error-text-font-size) !important;
  font-weight: var(--ctt-error-text-font-weight) !important;
}

/* ==========================================================================
   VERTICAL ALIGNMENT UTILITIES
   ========================================================================== */

.ctt-align-baseline {
  vertical-align: baseline !important;
}

.ctt-align-top {
  vertical-align: top !important;
}

.ctt-align-middle {
  vertical-align: middle !important;
}

.ctt-align-bottom {
  vertical-align: bottom !important;
}

.ctt-align-text-top {
  vertical-align: text-top !important;
}

.ctt-align-text-bottom {
  vertical-align: text-bottom !important;
}

.ctt-align-sub {
  vertical-align: sub !important;
}

.ctt-align-super {
  vertical-align: super !important;
}

/* ==========================================================================
   WHITESPACE UTILITIES
   ========================================================================== */

.ctt-whitespace-normal {
  white-space: normal !important;
}

.ctt-whitespace-nowrap {
  white-space: nowrap !important;
}

.ctt-whitespace-pre {
  white-space: pre !important;
}

.ctt-whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

.ctt-whitespace-pre-line {
  white-space: pre-line !important;
}

/* ==========================================================================
   BACKGROUND UTILITIES
   ========================================================================== */

.ctt-bg-fixed {
  background-attachment: fixed !important;
}

.ctt-bg-scroll {
  background-attachment: scroll !important;
}

.ctt-bg-clip-border {
  background-clip: border-box !important;
}

.ctt-bg-clip-padding {
  background-clip: padding-box !important;
}

.ctt-bg-clip-content {
  background-clip: content-box !important;
}

.ctt-bg-clip-text {
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.ctt-bg-repeat {
  background-repeat: repeat !important;
}

.ctt-bg-no-repeat {
  background-repeat: no-repeat !important;
}

.ctt-bg-repeat-x {
  background-repeat: repeat-x !important;
}

.ctt-bg-repeat-y {
  background-repeat: repeat-y !important;
}

.ctt-bg-repeat-round {
  background-repeat: round !important;
}

.ctt-bg-repeat-space {
  background-repeat: space !important;
}

.ctt-bg-center {
  background-position: center !important;
}

.ctt-bg-left {
  background-position: left !important;
}

.ctt-bg-right {
  background-position: right !important;
}

.ctt-bg-top {
  background-position: top !important;
}

.ctt-bg-bottom {
  background-position: bottom !important;
}

.ctt-bg-cover {
  background-size: cover !important;
}

.ctt-bg-contain {
  background-size: contain !important;
}

/* ==========================================================================
   APPEARANCE AND STYLE UTILITIES
   ========================================================================== */

.ctt-appearance-none {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.ctt-resize-none {
  resize: none !important;
}

.ctt-resize-y {
  resize: vertical !important;
}

.ctt-resize-x {
  resize: horizontal !important;
}

.ctt-resize {
  resize: both !important;
}

/* ==========================================================================
   OUTLINE UTILITIES
   ========================================================================== */

.ctt-outline-none {
  outline: none !important;
}

.ctt-outline-1 {
  outline: 1px solid !important;
}

.ctt-outline-2 {
  outline: 2px solid !important;
}

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

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

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

/* ==========================================================================
   COMBINATION UTILITIES - COMMON PATTERNS
   ========================================================================== */

/* Center element absolutely */
.ctt-center-absolute {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Full screen overlay */
.ctt-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Aspect ratio container helper */
.ctt-aspect-container {
  position: relative !important;
  width: 100% !important;
}

.ctt-aspect-container>* {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Clearfix for floats */
.ctt-clearfix::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* Circle shape */
.ctt-rounded-circle {
  border-radius: 50% !important;
}

/* Disable text selection on hover (useful for interactive elements) */
.ctt-no-select {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Smooth scroll behavior */
.ctt-scroll-smooth {
  scroll-behavior: smooth !important;
}

/* ==========================================================================
   PRINT UTILITIES
   ========================================================================== */

@media print {
  .ctt-print-hidden {
    display: none !important;
  }

  .ctt-print-show {
    display: block !important;
  }

  .ctt-print-inline {
    display: inline !important;
  }

  .ctt-print-inline-block {
    display: inline-block !important;
  }
}

/* ==========================================================================
   RESPONSIVE PREFIXES
   ========================================================================== */

/* These utilities can be used with media query prefixes if needed */
/* Example: @media (max-width: 768px) { .ctt-sm\:hidden { display: none; } } */

/* Common breakpoints from tokens */
/* xs: 375px   - Small mobile */
/* sm: 481px   - Large mobile */
/* md: 769px   - Tablet */
/* lg: 1201px  - Large desktop */
/* xl: 1401px  - Extra large desktop */

/* --- inlined: premium-styles.css --- */
:root {
    /* Premium Shadow Tokens */
    --ctt-shadow-premium-sm: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    --ctt-shadow-premium-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --ctt-shadow-premium-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);

    /* Glassmorphism Base Tokens */
    --ctt-glass-blur-sm: 4px;
    --ctt-glass-blur-md: 8px;
    --ctt-glass-blur-lg: 16px;
    --ctt-glass-bg-light: rgba(255, 255, 255, 0.7);
    --ctt-glass-bg-dark: rgba(0, 0, 0, 0.6);
    --ctt-glass-border-light: rgba(255, 255, 255, 0.2);
    --ctt-glass-border-dark: rgba(255, 255, 255, 0.1);
}

/* 
 * Premium Utility Classes
 * Use these to elevate the aesthetic of components
 */

/* Multi-layer smooth shadows */
.ctt-shadow-premium-sm {
    box-shadow: var(--ctt-shadow-premium-sm);
}

.ctt-shadow-premium-md {
    box-shadow: var(--ctt-shadow-premium-md);
}

.ctt-shadow-premium-lg {
    box-shadow: var(--ctt-shadow-premium-lg);
}

/* Glassmorphism effects */
.ctt-glass {
    background: var(--ctt-glass-bg-light);
    backdrop-filter: blur(var(--ctt-glass-blur-md));
    -webkit-backdrop-filter: blur(var(--ctt-glass-blur-md));
    border: 1px solid var(--ctt-glass-border-light);
}

.ctt-glass-dark {
    background: var(--ctt-glass-bg-dark);
    backdrop-filter: blur(var(--ctt-glass-blur-md));
    -webkit-backdrop-filter: blur(var(--ctt-glass-blur-md));
    border: 1px solid var(--ctt-glass-border-dark);
    color: white;
}

.ctt-glass-thin {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(var(--ctt-glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--ctt-glass-blur-lg));
    border: 1px solid var(--ctt-glass-border-light);
}

/* Premium interactions */
.ctt-hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ctt-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--ctt-shadow-premium-md);
}