:root {
    /* Primary Colors */
    --primary-light: #4db6ac;
    --primary-default: #00796B;
    --primary-dark: #004d40;
    --primary-50: #e0f2f7; /* Lighter */
    --primary-100: #b2dfdb;
    --primary-200: #80cbc4;
    --primary-300: #4db6ac; /* Same as light */
    --primary-400: #26a69e;
    --primary-500: #009688;
    --primary-600: #00796b; /* Same as default */
    --primary-700: #00695c;
    --primary-800: #004d40; /* Same as dark */
    --primary-900: #003a2e;

    /* Secondary Colors */
    --secondary-light: #ffeb3b;
    --secondary-default: #FFC107;
    --secondary-dark: #ff8f00;
    --secondary-50: #fffde7; /* Lighter */
    --secondary-100: #fff9c4;
    --secondary-200: #fff59d;
    --secondary-300: #ffeb3b; /* Same as light */
    --secondary-400: #ffd800;
    --secondary-500: #ffc107; /* Same as default */
    --secondary-600: #ffb300;
    --secondary-700: #ffa000;
    --secondary-800: #ff8f00; /* Same as dark */
    --secondary-900: #ff6f00;
}
@import url('https://fonts.googleapis.com/css?family=Numans');

.da_action_btn{
    color: var(--primary-50);
    background-color: var(--primary-default);
    width: 100px;
}
    
.da_action_btn:hover{
    color: white;
    background-color: var(--primary-light);
}

.da_sec_action_btn{
    color: var(--primary-default);
    background-color: var(--secondary-200);
    width: 100px;
}
    
.da_sec_action_btn:hover{
    color: var(--primary-default);
    background-color: var(--secondary-light);
}