/* Define Deafult and global variables for colors, fonts, and sizes */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400&display=swap');

:root {
    /* Background colors */
    --color-bg: #ffffff; /* Primary background color */
    --color-bg-offset: #4d4242; /* Offset background color */
    --color-bg-shade: #ffffff; /* Possible to use for headers and footers container */
    /* Primary colors */
    --color-primary: #0b71f5; /* Primary brand color */
    --color-primary-offset: #a7c0d1; /* Offset brand color */
    /* Secondary color */
    --color-secondary: #e5ebf2; /* Secondary brand color */
    /* Text colors */
    --color-text: #000000; /* Primary text color */
    --color-text-offset: hwb(210 29% 66%); /* Offset text color */
    --color-text-secondary: #272727; /* Secondary text color */
    --color-error-text: #FFA800;
    --color-error-icon: #FFA800;
    --color-link-text: var(--color-primary);
    --color-doc-type-bg: #CBDEFC;
    --color-doc-type-plate: #CBDEFC;
    --color-doc-type-edge: var(--color-primary);
    --color-doc-type-icons-text: var(--color-bg);
    --color-doc-type-face: #FFE0B4;
    --color-doc-type-face-edge: #605449;
    --color-button-bg: var(--color-primary);
    --color-button-secondary-bg: var(--color-secondary);
    --color-button-text: var(--color-bg);
    --color-button-secondary-text: var(--color-primary);
    /* Sizes and styles */
    --text-align: center;
    --text-align-popup: left;
    --text-font-family: 'Nunito', sans-serif;
    /* Font size for text */
    --font-size: 1rem;
    --font-size-secondary: 2rem;
    --font-size-error: 2rem;
    /*  text-weights */
    --error-text-weight: 650;
    --text-primary-weight: 700;
    --text-secondary-weight: 400;
    /* Header */
    --box-shadow: -0px 0px 12px 0px #ddd; /* Box shadow effect for header*/
    /* Doc Tye List  */
    --selection-shadow: 0px 0px 3px 0px #d3d3d3; /* Shadow effect for selected elements */

    --selection-border: 0px solid #252b32;
    --selection-color-bg: var(--color-bg);
    --selection-border-radius: 5px;
    --selection-color-bg-active: #f4f4f4;
    --selection-border-active: 2px solid #0b71f5;
    --selection-border-radius-active: 5px;
    /* Buttons styling*/
    --button-size: 82%;
    --button-border-radius: 38px; /* Border radius for buttons */
    --button-font-size: 16px;
    --button-font-weight: 700;
    --button-shadow: 0px 0px 10px 0px #9a9a9a; /* Shadow effect for buttons */
    --button-secondary-shadow: var(--button-shadow);
    --button-border: 0px solid #00fffb; /* Border style for buttons */
    --button-secondary-border: 0px solid #2c3535; /* Border style for buttons */
    /*  */
    --submit-border: 1px dashed #4c4c4c;
    --submit-border-radius: 17px;
    /* CheckBox styling */
    --checkbox-size: 1.3em; /* checkbox size width and height */
    --checkbox-border: 0.1em solid #000;
    --checkbox-color: var(--color-primary);
    --checkmark-color: var(--color-bg);
    /* input types styling */
    --input-text-color: var(--color-text-secondary);
    --input-text-bg-color: var(--color-bg-shade);
    --input-text-radius: 10px;
    --input-text-border: 1px solid #666666;
    --input-text-border-active: 1px solid var(--color-primary);
}