@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.ttf') format('truetype');
}  
@font-face {
    font-family: 'Roboto-Light';
    src: url('Roboto-Light.ttf') format('truetype');
}  
@font-face {
    font-family: 'Roboto-Medium';
    src: url('Roboto-Medium.ttf') format('truetype');
}  
@font-face {
    font-family: 'Roboto-Bold';
    src: url('Roboto-Bold.ttf') format('truetype');    
}  
@font-face {
    font-family: 'Roboto-Italic';
    src: url('Roboto-MediumItalic.ttf') format('truetype');
}

:root {
    /* Primary Colors */
    --cn_Primary: #3aa5ff;
    --cn_Primary100: #f6f9fb;
    --cn_Primary200: #cfecff;
    --cn_Primary300: #89c9ff;

    /* Secondary Colors */
    --cn_Secondary: #ffa62c;
    --cn_Secondary100: #ffdba8;
    --cn_Secondary200: #ffca80;

    /* Neutral Colors */
    --cn_Neutral100: #fcfcfc;
    --cn_Neutral150: #f3f3f3;
    --cn_Neutral200: #e0e0e0;
    --cn_Neutral300: #a7a7a7;
    --cn_Neutral400: #5c5c5c;

    /* Special Colors */
    --cn_Success: #28a745;
    --cn_Warning: #ffe532;
    --cn_Error: #ff3333;

    /* Other Colors */
    --cn_White: #ffffff;
    --cn_Black: #000000;

    /* Font Family */
    --cn_font-family: 'Roboto', sans-serif;
    --cn_font-family-bold: 'Roboto-Bold', sans-serif;


    /* Font Sizes */
    --cn_font-tiny: 0.5rem;
    --cn_font-small: 0.625rem;
    --cn_font-smaller: 0.75rem;
    --cn_font-standard: 1rem; 
    --cn_font-larger: 1.25rem;
    --cn_font-large: 1.5rem;
    --cn_font-extralarge: 2.0rem;    
    
}