/*
    2025-08-08 - Francisco Ramirez
    * Creation of the proposed file.
*/

/* -- VARIABLES -- */
:root {
    /* PALETTE */
    --custom-color-primary-0: #ffffff;
    --custom-color-primary-25: #D8E4E4;
    --custom-color-primary-50: #9CBABC;
    --custom-color-primary-75: #2A8383;
    --custom-color-primary-100: #226D6D;
    --custom-color-secondary-0: #0D0630;
    --custom-color-tertiary-0: #e6ff2a;
    --custom-color-bg-primary: var(--custom-color-primary-75);
    --custom-color-bg-warning: #FEFDFA;
    --custom-color-bg-yellow: #FDBD0E; /* Used in the "seguimientos" counter. In "Tablero" */
    --custom-color-bg-orange: #E26709; /* Used in the "Cuentas por cobrar" counter. In "Tablero" */
    --custom-color-bg-gray: #898A8D; /* Used in the "Clientes potenciales" counter. In "Tablero" */
    --custom-color-bg-red: #CF322D;
    /* FONTS */
    --custom-font-general: 'Comfortaa', sans-serif;
    /* TEXT */
    /*--custom-text-size-ab-titles-a: 1em; We will use it later, to set the general configuration of the project (visually).
    --custom-text-size-ab-titles-b: 1.6em;
    --custom-text-size-ab-titles-c: 2em;
    --custom-text-size-ab-description-a: 4em;
    --custom-text-size-ab-description-b: 5em;
    --custom-text-size-ab-description-c: 6em;
    --custom-text-weight-800: 5em; */
    --custom-text-color-text-dark: var(--custom-color-secondary-0);
    --custom-text-color-text-light: var(--custom-color-primary-0);
    /* BUTTONS */
    --custom-button-general-bgcolor-normal: #FEFDFA;
    --custom-button-general-bgcolor-hover: #F6F8F8;
    --custom-button-general-bgcolor-active: #F5F5F5;
    --custom-button-general-bgcolor-active-darker: #EAEAEA;
    --custom-button-general-bgcolor-disabled: #F5F5F5;
    --custom-button-general-text-color-normal: #0D0630;
    --custom-button-general-text-color-hover: #0D0630;
    --custom-button-general-text-color-active: #0D0630;
    --custom-button-general-text-color-disabled: #EFEFEF;
    --custom-button-general-scale-hover: scale(1.05);
    /* SPACING */
    --custom-spacing-padding-general: 8px;
    /* BORDERS */
    --custom-border-general-border-radius-low: 8px;
    --custom-border-general-border-radius: 12px;
    --custom-border-general-border-radius-b: 2rem;
    --custom-general-color-border-light: var(--custom-color-primary-50);
    /* FORMS */
    --custom-form-field-general-input-bgcolor-normal: #FEFDFA;
    --custom-form-field-general-input-bgcolor-hover: #F6F8F8;
    --custom-form-field-general-input-bgcolor-readonly: #EFEFEF;
    --custom-form-field-general-input-text-color-normal: #0D0630;
    --custom-form-field-general-input-text-color-readonly: var(--custom-form-field-general-input-text-color-normal);
    --custom-form-field-general-input-text-color-disabled: #9C9D9F;
    --custom-form-field-general-label-font-family: var(--custom-font-general);
    --custom-form-field-general-label-width: 162px; /* Fixed size for the labels */
    --custom-form-field-general-border-radius: var(--custom-border-general-border-radius);
    --custom-form-field-general-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
    /* DROPDOWNS */
    --custom-dropdown-el-text-color-normal: #2A8383 !important;
    --custom-dropdown-el-text-color-hover: var(--custom-text-color-text-dark);
    /* DURATIONS */
    --custom-duration-transitions: 0.1s; /* We want to ensure that most animations are of a standard length. */
    /* ANIMATION INTERPOLATIONS */
    /* What interpolation some elements will use when transforming or moving. You can see more about this in https://easings.net/ */
    --custom-interpolation-general: ease-in-out; /* cubic-bezier(0.36, 0, 0.66, -0.56) */
    /* ANIMATIONS (Transitions, Keyframes) */
    --custom-transition-general: all var(--custom-duration-transitions) var(--custom-interpolation-general);
    --custom-transition-bgcolor: background-color var(--custom-duration-transitions) var(--custom-interpolation-general);
    --custom-transition-color: color var(--custom-duration-transitions) var(--custom-interpolation-general);
    --custom-transition-fill: fill var(--custom-duration-transitions) var(--custom-interpolation-general); /* For SVG */
    /* EXTRA PARAMETERS */
    /* Elements that use this property will not be selectable, but we can quickly revert that setting by modifying this variable... */
    --user-select-none: none;
}

/* Thanks to this, we can apply media queries to some properties from this file, and affect all the other styles in the project. */