/**
 * 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);
}