/* styles.css */

/* 1) CSS Custom Properties (from Figma) */
:root {
    /* Border radius */
    --radius-base: 8px;

    /* Base colors */
    --color-primary:       #5CAEFF;
    --color-primary-alt:   #BDDCFF;
    --color-secondary:     #FFB256;
    --color-accent:        #2D79C4;
    --color-background:    #F9FAFB;
    --color-background-semi:    #f0f0f0e9;
    --color-green:         #52BA21;
    --color-red:           #E45656;

    /* Text colors */
    --text-primary:        #0E0E0E;
    --text-secondary:      #555555;

    /* Border and shadow */
    --border-color:        #E0E0E0;
    --shadow-color:        rgba(0, 0, 0, 0.25);

    /* Grayscale */
    --gray-light: #E0E0E0;                  /* LGrey */
    --gray: #8D8D8D;                        /* Gray */
    --gray-dark: #555555;                   /* DGray */

    /* 30% opacity variants */
    --gray-30: rgba(141, 141, 141, 0.3);    /* 30Gray */
    --gray-dark-30: rgba(85, 85, 85, 0.3);   /* 30DGray */

    /* Black */
    --black: #0E0E0E;

    /* Blues */
    --corn-blue: #5CAEFF;
    --light-blue: #BDDCFF;
    --blue: #4682B4;
    --dark-blue: #2665A3;

    /* Yellows */
    --yellow: #FFB256;
    --dark-yellow: #D9831C;

    /* Greens */
    --green: #52BA21;
    --x-dark-green: #3F7636;

    /* Reds */
    --light-red: #FFCDD4;
    --red: #E45656;
    --dark-red: #C24242;
    --x-dark-red: #8B2929;

    /* Red-pinks */
    --red-pink: #9E2436;
    --x-dark-red-pink: #691824;

    --y-dark-red-30: rgba(255, 0, 0, 0.5);

    /* Neutrals */
    --white: #F9AFB;
}