: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: 239 236 255; /*#EFECFF*/
    --primary-70: 211 203 246; /*#D3CBF6*/
    --primary-80: 137 116 231; /*#8974E7*/
    --primary-90: 93 64 221; /*#5D40DD*/
    --primary-100: 36 19 108; /*#24136C*/

    --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: 220 252 231; /*#DCFCE7*/
    --color-success: 34 197 94; /*#22C55E*/
    --color-info-light: 254 249 195; /*#FEF9C3*/
    --color-info: 253 224 71; /*#FDE047*/
    --color-error-light: 254 226 226; /*#FEE2E2*/
    --color-error: 239 68 68; /*#EF4444*/

    --color-pro: 185 95 137; /*#B95F89*/
    --color-pro-light: 255 239 247; /*#FFEFF7*/
    --color-whatsapp: 72 200 87; /*#48C857*/

    /* Topic Colors */
    --color-special-credits: 33 109 208; /*#216DD0*/
    --color-header-promo: 69 10 10; /*#450A0A*/
    --color-report: 253 230 138; /*#FDE68A*/
    --color-header-button: var(--primary-90);
    --color-header-button-text: 255 255 255; /*#FFFFFF*/
    --color-header-highlight: var(--primary-80);
    --color-listing-frequent-search-tag: var(--color-pro-light);
    --color-listing-frequent-search-tag-text: 0 0 0; /*#000000*/
    --color-homepage-frequent-search-tag: var(--primary-70);
    --color-homepage-frequent-search-tag-text: var(--primary-90);
    --color-cities-tag: var(--primary-70);
    --color-cities-tag-text: var(--primary-90);

    --color-ad-box-type: var(--primary-90);
    --color-ad-box-title: var(--primary-100);
    --color-ad-box-body: var(--secondary-100);
    --color-ad-box-tags: 255 255 255; /*#FFFFFF*/
    --color-ad-box-tags-border: var(--primary-70);
    --color-ad-box-turbo: var(--primary-50);
    --color-ad-box-turbo-title: var(--primary-100);
    --color-ad-box-turbo-body: var(--secondary-100);
    --color-ad-box-turbo-line: var(--secondary-60);
}