/// Base tokens
/// ===============================================================
/// 
/// Base tokens are fundamental design elements in a design system. 
/// They serve as the foundational building blocks for the system and establish 
/// consistency throughout the user interface. Base tokens include values for 
/// common design properties such as colors, typography, spacing, and more. 
/// These tokens are used to maintain a cohesive visual language and simplify 
/// design and development processes.


/// Dimension tokens
/// --------------------------
$cdsbt-dimension-0: 0;
$cdsbt-dimension-1: 0.0625rem;
$cdsbt-dimension-2: 0.125rem;
$cdsbt-dimension-4: 0.25rem;
$cdsbt-dimension-8: 0.5rem;
$cdsbt-dimension-12: 0.75rem;
$cdsbt-dimension-16: 1rem;
$cdsbt-dimension-20: 1.25rem;
$cdsbt-dimension-24: 1.5rem;
$cdsbt-dimension-32: 2rem;
$cdsbt-dimension-40: 2.5rem;
$cdsbt-dimension-48: 3rem;
$cdsbt-dimension-56: 3.5rem;
$cdsbt-dimension-64: 4rem;
$cdsbt-dimension-72: 4.5rem;
$cdsbt-dimension-80: 5rem;
$cdsbt-dimension-88: 5.5rem;
$cdsbt-dimension-96: 6rem;
$cdsbt-dimension-104: 6.5rem;
$cdsbt-dimension-112: 7rem;
$cdsbt-dimension-120: 7.5rem;
$cdsbt-dimension-128: 8rem;
$cdsbt-dimension-160: 10rem;
$cdsbt-dimension-240: 15rem;
$cdsbt-dimension-320: 20rem;
$cdsbt-dimension-480: 30rem;
$cdsbt-dimension-560: 35rem;
$cdsbt-dimension-640: 40rem;
$cdsbt-dimension-720: 45rem;
$cdsbt-dimension-1024: 64rem;
$cdsbt-dimension-1440: 90rem;
$cdsbt-dimension-999: 999rem;

/// Icon tokens size
/// --------------------------
$cdsbt-iconsize-16: 1rem;
$cdsbt-iconsize-24: 1.5rem;
$cdsbt-iconsize-32: 2rem;
$cdsbt-iconsize-48: 3rem;
$cdsbt-iconsize-96: 6rem;

/// Layout/breakpoint tokens
/// --------------------------
$cdsbt-layout-480: 30rem;
$cdsbt-layout-640: 40rem;
$cdsbt-layout-1024: 64rem;
$cdsbt-layout-1440: 90rem;

/// Screen tokens
/// --------------------------
$cdsbt-screen-10: 10%;
$cdsbt-screen-20: 20%;
$cdsbt-screen-30: 30%;
$cdsbt-screen-40: 40%;
$cdsbt-screen-50: 50%;
$cdsbt-screen-60: 60%;
$cdsbt-screen-70: 70%;
$cdsbt-screen-80: 80%;
$cdsbt-screen-90: 90%;
$cdsbt-screen-100: 100%;

/// Shadow tokens (offsetX, offsetY, blur, opacity)
/// --------------------------
$cdsbt-shadow-1: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-2: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-4: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-8: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
$cdsbt-shadow-16: 0 1rem 1rem rgba(0, 0, 0, 0.1);

/// ZIndex tokens
/// --------------------------
$cdsbt-zindex-0: 0;
$cdsbt-zindex-100: 100;
$cdsbt-zindex-200: 200;
$cdsbt-zindex-300: 300;
$cdsbt-zindex-400: 400;
$cdsbt-zindex-500: 500;
$cdsbt-zindex-600: 600;

/// Speed tokens
/// --------------------------
$cdsbt-speed-1: 0.1s;
$cdsbt-speed-2: 0.2s;
$cdsbt-speed-4: 0.4s;
$cdsbt-speed-8: 0.8s;

/// Breakpoint tokens
/// --------------------------
$cdsbt-breakpoint-xs: 0px; // Mobile devices
$cdsbt-breakpoint-s: 600px; // Small devices
$cdsbt-breakpoint-m: 768px; // Medium devices
$cdsbt-breakpoint-l: 900px; // Large devices
$cdsbt-breakpoint-xl: 1200px; // Extra large devices