/* ===================================================================
   M50 DESIGN SYSTEM - TOKENS INDEX
   Importa todos os design tokens da plataforma
   
   USO: @import url('css/tokens/tokens.css');
   =================================================================== */

/* Design Tokens - Ordem de importação */
@import url('density.css'); /* fatores de compactação — consumidos pelas escalas abaixo */
@import url('colors.css');
@import url('typography.css');
@import url('spacing.css');
@import url('shadows.css');
@import url('borders.css');
@import url('transitions.css');

/* ===================================================================
   TOKENS ADICIONAIS
   =================================================================== */

:root {
    /* ===== BREAKPOINTS (para uso em JS/Blazor) ===== */
    --m50-breakpoint-xs: 0;
    --m50-breakpoint-sm: 360px;
    --m50-breakpoint-md: 768px;
    --m50-breakpoint-lg: 1024px;
    --m50-breakpoint-xl: 1440px;
    --m50-breakpoint-2xl: 1920px;
    
    /* ===== CONTAINER SIZES ===== */
    --m50-container-sm: 640px;
    --m50-container-md: 768px;
    --m50-container-lg: 1024px;
    --m50-container-xl: 1280px;
    --m50-container-2xl: 1536px;
    
    /* ===== ICON SIZES (compactam com a densidade) ===== */
    --m50-icon-xs: calc(12px * var(--m50-density-space, 1));
    --m50-icon-sm: calc(16px * var(--m50-density-space, 1));
    --m50-icon-md: calc(24px * var(--m50-density-space, 1));
    --m50-icon-lg: calc(32px * var(--m50-density-space, 1));
    --m50-icon-xl: calc(48px * var(--m50-density-space, 1));
    
    /* ===== OPACITY ===== */
    --m50-opacity-0: 0;
    --m50-opacity-10: 0.1;
    --m50-opacity-20: 0.2;
    --m50-opacity-30: 0.3;
    --m50-opacity-40: 0.4;
    --m50-opacity-50: 0.5;
    --m50-opacity-60: 0.6;
    --m50-opacity-70: 0.7;
    --m50-opacity-80: 0.8;
    --m50-opacity-90: 0.9;
    --m50-opacity-100: 1;
    
    /* ===== ASPECT RATIOS ===== */
    --m50-aspect-square: 1 / 1;
    --m50-aspect-video: 16 / 9;
    --m50-aspect-4-3: 4 / 3;
    --m50-aspect-21-9: 21 / 9;
}