﻿:root {
    /* Colors */
    --white: #ffffff;
    /*--veryLightGray: #f9f9fb;*/
    --veryLightGray: #F7F7F7;
    --lightGray: #dadce0;
    --gray: #646b7b;
    --darkGray: #434a5c;
    --veryDarkGray: #1e2841;
    --black: #000000;
    --lightBlue: #79cbff;
    --blue: #4886ff;
    --darkBlue: #006fba;
    --lightRed: #f26c51;
    --red: #fd607f;
    --darkRed: #e20f18;
    --lightGreen: #A1EC83;
    --green: #25C772;
    --darkGreen: #0AA253;
    --englishViolet: #413D58;
    --blueCrayola: #3772FF;
    --azul: #0B70B8;
    --aliceBlue: #EBF7FE;
    --lapisLazuli: #1A5483;
    /* App Logo */
    --logoHeight: 3rem;
    --logoHeightMobile: 2.5rem;
    /* Icon Size */
    --smallIconSize: 16px;
    --mediumIconSize: 24px;
    --largeIconSize: 32px;
    --xLargeIconSize: 40px;
    --xXLargeIconSize: 60px;
    --xXXLargeIconSize: 80px;
    /* Size */
    --smallSize: 0.8rem;
    --mediumSize: 1rem;
    --largeSize: 2rem;
    --xLargeSize: 2.5rem;
    --xXLargeSize: 3rem;
    /* MaxWidth */
    --largeMaxWidth: 18rem;
    --xXLargeMaxWidth: 1000px;
    /* Font Size */
    --dynamicXSmallFontSize: 80%;
    --dynamicSmallFontSize: 92%;
    --dynamicMediumFontSize: 100%;
    --dynamicLargeFontSize: 112%;
    --dynamicXLargeFontSize: 120%;
    --dynamicXXLargeFontSize: 180%;
    --dynamicXXXLargeFontSize: 200%;
    --dynamicXXXXLargeFontSize: 220%;
    --dynamicXXXXXLargeFontSize: 260%;
    --dynamicXXXXXXLargeFontSize: 280%;
    /* Font Weight */
    --boldFont: 600;
    --normalFont: 400;
    /* Padding */
    --xSmallPadding: 0.1rem;
    --smallPadding: 0.2rem;
    --mediumPadding: 0.4rem;
    --largePadding: 0.8rem;
    --xLargePadding: 1rem;
    --xXLargePadding: 2rem;
    --xXXLargePadding: 3rem;
    --xXXXLargePadding: 4rem;
    --xXXXXXLargePadding: 6rem;
    /* Margin */
    --smallMargin: 0.2rem;
    --mediumMargin: 0.4rem;
    --largeMargin: 0.8rem;
    --xLargeMargin: 1rem;
    --xXLargeMargin: 2rem;
    /* Gap */
    --smallGap: 0.2rem;
    --mediumGap: 0.4rem;
    --largeGap: 0.8rem;
    --xLargeGap: 1rem;
    --xXLargeGap: 2rem;
    /* Border Radius */
    --smallBorderRadius: 4px;
    --mediumBorderRadius: 8px;
    --largeBorderRadius: 12px;
    --xLargeBorderRadius: 1rem;
    --xXLargeBorderRadius: 24px;
    --xXXLargeBorderRadius: 2rem;
    --circleBorderRadius: 50%;
    /* Border Thickness */
    --mediumBorderThickness: 1px;
    --largeBorderThickness: 2px;
    /* Dynamic Color */
    --dynamicBackColor: var(--darkGray);
    --dynamicForeColor: var(--white);
    --dynamicBorderColor: var(--darkGray);
    /* Filter */
    --lightFilterDropShadow: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.2));
    /* Box Shadow */
    --innerBoxShadow: inset 0px 0px 8px 0px rgb(0 0 0 / 24%);
}
