:root {
    /*
    ** We use RGB values (e.g., "239 236 255") instead of HEX because Tailwind
    ** generates colors using the syntax:
    **   `rgb(var(--primary) / <alpha-value>)`
    ** HEX variables cannot be combined with an opacity value, so Tailwind classes
    ** like bg-opacity-* or text-opacity-* would not work.
    */

    /* Colors */
    --primary-50: 219 238 255; /*#DBEEFF*/
    --primary-70: 0 122 245; /*#007AF5*/
    --primary-80: 0 92 184; /*#005CB8*/
    --primary-90: 0 61 122; /*#003D7A*/
    --primary-100: var(--primary-90);

    --secondary-30: 240 240 240; /*#F0F0F0*/
    --secondary-40: 244 247 250; /*#F4F7FA*/
    --secondary-50: 233 240 245; /*#E9F0F5*/
    --secondary-60: 207 219 230; /*#CFDBE6*/
    --secondary-70: 124 145 162; /*#7C91A2*/
    --secondary-75: 102 112 133; /*#667085*/
    --secondary-80: 72 95 114; /*#485F72*/
    --secondary-90: 38 61 76; /*#263D4C*/
    --secondary-100: 21 33 41; /*#152129*/

    /* Base Colors */
    --color-success-light: 236 253 245; /*#ECFDF5*/
    --color-success: 5 150 105; /*#059669*/
    --color-info-light: 255 247 237; /*#FFF7ED*/
    --color-info: 234 88 12; /*#EA580C*/
    --color-error-light: 254 242 242; /*#FEF2F2*/
    --color-error: 220 38 38; /*#DC2626*/

    --color-pro: 255 195 0; /*#FFC300*/
    --color-pro-light: 255 250 235; /*#FFFBEB*/
    --color-whatsapp: 72 200 87; /*#48C857*/

    /* Topic Colors */
    --color-special-credits: var(--primary-80);
    --color-header-promo: 221 38 71; /*#DD2647*/
    --color-report: 255 214 10; /*#FFD60A*/
    --color-header-button: var(--color-pro);
    --color-header-button-text: var(--primary-100);
    --color-header-highlight: var(--color-pro);
    --color-listing-frequent-search-tag: 112 184 255; /*#70B8FF*/
    --color-listing-frequent-search-tag-text: 0 29 61; /*#001D3D*/
    --color-homepage-frequent-search-tag: var(--primary-100);
    --color-homepage-frequent-search-tag-text: 255 255 255; /*#FFFFFF*/
    --color-cities-tag: var(--primary-100);
    --color-cities-tag-text: 255 255 255; /*#FFFFFF*/

    --color-ad-box-type: 0 29 61; /*#001D3D*/
    --color-ad-box-title: 0 8 20; /*#000814*/
    --color-ad-box-body: 0 8 20; /*#000814*/
    --color-ad-box-tags: 112 184 255; /*#70B8FF*/
    --color-ad-box-tags-border: 112 184 255; /*#70B8FF*/
    --color-ad-box-turbo: var(--primary-100);
    --color-ad-box-turbo-title: 255 255 255; /*#FFFFFF*/
    --color-ad-box-turbo-body: 255 255 255; /*#FFFFFF*/
    --color-ad-box-turbo-line: 255 255 255; /*#FFFFFF*/
}