/// Semantic color tokens
/// ===============================================================
/// 
/// Semantic tokens build upon the base tokens and provide context-specific meaning to design elements. 
/// These tokens are typically used for components and patterns within the application and are 
/// derived from the base tokens. They give semantic information about how a component 
/// should look or behave in specific contexts.

@use 'cds-tokens-base' as tokens;

/// Border radius tokens
/// --------------------------
/// Is inherited by the border-radius
$cds-border-radius-null: tokens.$cdsbt-dimension-0;
$cds-border-radius-25: tokens.$cdsbt-dimension-4;
$cds-border-radius-50: tokens.$cdsbt-dimension-8;
$cds-border-radius-100: tokens.$cdsbt-dimension-16;
//$cds-border-radius-200: tokens.$cdsbt-dimension-24;
$cds-border-radius-full: tokens.$cdsbt-dimension-999;

/// Size tokens
/// --------------------------
/// Is inherited by the width, height, minWidth, minHeight, maxWidth, maxHeight
$cds-size-50: tokens.$cdsbt-dimension-8;
$cds-size-75: tokens.$cdsbt-dimension-12;
$cds-size-100: tokens.$cdsbt-dimension-16;
$cds-size-125: tokens.$cdsbt-dimension-20;
$cds-size-150: tokens.$cdsbt-dimension-24;
$cds-size-200: tokens.$cdsbt-dimension-32;
$cds-size-250: tokens.$cdsbt-dimension-40;
$cds-size-300: tokens.$cdsbt-dimension-48;
$cds-size-350: tokens.$cdsbt-dimension-56;
$cds-size-400: tokens.$cdsbt-dimension-64;
$cds-size-450: tokens.$cdsbt-dimension-72;
$cds-size-500: tokens.$cdsbt-dimension-80;

/// Icon size tokens
/// --------------------------
/// Is inherited only by the font-size for __icon elements.
$cds-icon-100: tokens.$cdsbt-iconsize-16;
$cds-icon-150: tokens.$cdsbt-iconsize-24;
$cds-icon-200: tokens.$cdsbt-iconsize-32;
$cds-icon-300: tokens.$cdsbt-iconsize-48;
$cds-icon-600: tokens.$cdsbt-iconsize-96;

/// Spacing tokens
/// --------------------------
/// Is inherited by the padding, margin, gap, inset, space, translate, top, bottom, left, right
$cds-spacing-0: tokens.$cdsbt-dimension-0;
$cds-spacing-25: tokens.$cdsbt-dimension-4;
$cds-spacing-50: tokens.$cdsbt-dimension-8;
$cds-spacing-75: tokens.$cdsbt-dimension-12;
$cds-spacing-100: tokens.$cdsbt-dimension-16;
$cds-spacing-125: tokens.$cdsbt-dimension-20;
$cds-spacing-150: tokens.$cdsbt-dimension-24;
$cds-spacing-200: tokens.$cdsbt-dimension-32;
$cds-spacing-250: tokens.$cdsbt-dimension-40;
$cds-spacing-300: tokens.$cdsbt-dimension-48;
$cds-spacing-400: tokens.$cdsbt-dimension-64;

/// Outline tokens
/// --------------------------
/// Is inherited by the outline. Do not use in border width.
$cds-outline-25: tokens.$cdsbt-dimension-4;

/// Elevation tokens
/// --------------------------
/// Is inherited by the box-shadow
$cds-elevation-low: tokens.$cdsbt-shadow-1;
$cds-elevation-subtle: tokens.$cdsbt-shadow-2;
$cds-elevation-medium: tokens.$cdsbt-shadow-4;
$cds-elevation-raised: tokens.$cdsbt-shadow-8;
$cds-elevation-high: tokens.$cdsbt-shadow-16;

/// Transition speed tokens
/// --------------------------
/// Is inherited by the transition
$cds-transition-fastest: tokens.$cdsbt-speed-1;
$cds-transition-fast: tokens.$cdsbt-speed-2;
$cds-transition-default: tokens.$cdsbt-speed-4;
$cds-transition-slow: tokens.$cdsbt-speed-8;

/// Modal tokens
/// --------------------------
/// Is inherited by the width of the cds-modal only
$cds-modal-s: tokens.$cdsbt-dimension-480;
$cds-modal-m: tokens.$cdsbt-dimension-640;
$cds-modal-l: tokens.$cdsbt-dimension-1024;

/// Toast tokens
/// --------------------------
/// Is inherited by the width of the cds-toast only
$cds-toast-s: tokens.$cdsbt-dimension-320;
$cds-toast-m: tokens.$cdsbt-dimension-480;
$cds-toast-l: tokens.$cdsbt-dimension-640;

/// Tooltip tokens
/// --------------------------
/// Is inherited by the width of the cds-tooltip only
$cds-tooltip-s: tokens.$cdsbt-dimension-160;
$cds-tooltip-m: tokens.$cdsbt-dimension-320;

/// Layout tokens
/// --------------------------
/// Is inherited by the width of the layout only
$cds-layout-sidebar-s: tokens.$cdsbt-dimension-64;
$cds-layout-sidebar-m: tokens.$cdsbt-dimension-240;
$cds-layout-sidebar-l: tokens.$cdsbt-dimension-320;
$cds-layout-header-m: tokens.$cdsbt-dimension-104;
$cds-layout-footer-s: tokens.$cdsbt-dimension-40;

/// Dropdowns tokens
/// --------------------------
/// Is inherited by the width of the cds-dropdown__content only
$cds-dropdown-s: tokens.$cdsbt-dimension-160;
$cds-dropdown-m: tokens.$cdsbt-dimension-240;
$cds-dropdown-l: tokens.$cdsbt-dimension-320;

/// Layer tokens
/// --------------------------
/// Is inherited by the z-index.
$cds-layer-ground: tokens.$cdsbt-zindex-0; //Background, base, canvas, base UI elements
$cds-layer-structure: tokens.$cdsbt-zindex-100; //Header, footer, sidebar, navigation
$cds-layer-dropdown: tokens.$cdsbt-zindex-200; //Dropdowns
$cds-layer-modal: tokens.$cdsbt-zindex-300; //Modals, dialog boxes, confirmation dialogs
$cds-layer-overlay: tokens.$cdsbt-zindex-400; //Fullscreen overlay: Loading spinners, Fullscreen transitions
$cds-layer-fixed: tokens.$cdsbt-zindex-500; //Fixed elemenets: Toast, notifications, tooltips, popovers
$cds-layer-top: tokens.$cdsbt-zindex-600; //Topmost elements

/// Breakpoint Tokens
/// --------------------------
$cds-breakpoint-sidebar: tokens.$cdsbt-breakpoint-l;