:root {
    /* MY OWN COLORS */

    --fs-ci-primary: rgb(232 37 131);             /* ci-magenta */
    --fs-ci-accent: rgb(225 72 140);              /* ci-magenta-accent */
    --fs-ci-highlight-bg: rgb(142 142 148);       /* ci-gray-accent */
    --fs-ci-text-default: rgb(98 105 116);        /* text-font-default */


    --fs-ci-dark: rgb(83 91 100);                 /* .bg-ci-dark */
    --fs-ci-dark-accent: rgb(106 114 128);        /* .bg-ci-dark-accent */
    --fs-ci-dark\/50: #535b6480;                  /* .bg-ci-dark\/50 */
    --fs-ci-dark\/80: #535b64cc;                  /* .bg-ci-dark\/80 */

    --fs-ci-gray: rgb(209 213 215);               /* .bg-ci-gray */
    --fs-ci-gray-accent: rgb(142 142 148);        /* .bg-ci-gray-accent */
    --fs-ci-gray\/20: #d1d5d733;                  /* .bg-ci-gray\/20 */
    --fs-ci-gray\/60: #d1d5d799;                  /* .bg-ci-gray\/60 */

    --fs-ci-magenta: rgb(232 37 131);             /* .bg-ci-magenta  */
    --fs-ci-magenta-accent: rgb(225 72 140);      /* .bg-ci-magenta-accent */

    --fs-ci-ocher: rgb(216 207 186);              /* .bg-ci-ocher */
    --fs-ci-ocher-accent: rgb(227 216 195);       /* .bg-ci-ocher-accent */

    /* COLORS */

    --fs-black: #000000;
    --fs-white: #FFFFFF;

    --fs-gray-100: #f0f0f0;
    --fs-gray-200: #E9E9E9;
    --fs-gray-300: #ccc;
    --fs-gray-500: #adadad;
    --fs-gray-900: #333333;
    --fs-gray-alpha-50: rgba(238, 238, 238, .50);

    --fs-blue-100: #edf5ff;
    --fs-blue-200: #adcdff;
    --fs-blue-300: #5992ed;
    --fs-blue: #1351b4;

    --fs-bg-color: var(--fs-gray-50);
    --fs-bg-color-secondary: var(--fs-white);
    --fs-bg-color-tertiary: var(--fs-gray-100);
    --fs-bg-color-quarternary: var(--fs-gray-200);
    --fs-bg-color-quinary: var(--fs-gray-300);
    --fs-border: var(--fs-gray-200);

    --fs-text-color: var(--fs-ci-dark);

    --fs-hightlight-bg: var(--fs-ci-gray);
    --fs-hightlight-bg-alternative:  var(--fs-ci-ocher);
    --fs-hightlight-bg-secondary:  var(--fs-ci-ocher-accent);

    --fs-accent: var(--fs-ci-magenta);

    --fs-primary: var(--fs-ci-magenta);

    --fs-light: var(--fs-white);
    --fs-bg-light: var(--fs-bg-color-secondary);

    --fs-hover: #DCE3F2;

    --fs-btn:  var(--fs-ci-magenta);
    --fs-btn-hover: var(--fs-ci-magenta-accent);
    --fs-btn-active: var(--fs-ci-ocher);

    --fs-success: #138821;
    --fs-success-hover: #489B49;
    --fs-success-active: #8BBF89;

    --fs-info: var(--fs-ci-magenta);
    --fs-info-hover: var(--fs-ci-magenta-accent);
    --fs-info-active: var(--fs-ci-ocher);

    --fs-warning: #FFCD05;
    --fs-warning-hover: #DFB41E;
    --fs-warning-active: #A3882D;

    --fs-danger: #EA4D3C;
    --fs-danger-hover: #EA4D3C;
    --fs-danger-active: #F48D82;

    /* SPACING */

    --fs-spacing-base: 8px;
    --fs-spacing-half: calc(var(--fs-spacing-base) / 2);
    --fs-spacing-quarter: calc(var(--fs-spacing-base) / 4);

    --fs-spacing-1x: var(--fs-spacing-base);
    --fs-spacing-2x: calc(var(--fs-spacing-base) * 2);
    --fs-spacing-3x: calc(var(--fs-spacing-base) * 3);
    --fs-spacing-4x: calc(var(--fs-spacing-base) * 4);
    --fs-spacing-5x: calc(var(--fs-spacing-base) * 5);
    --fs-spacing-6x: calc(var(--fs-spacing-base) * 6);
    --fs-spacing-7x: calc(var(--fs-spacing-base) * 7);
    --fs-spacing-8x: calc(var(--fs-spacing-base) * 8);
    --fs-spacing-9x: calc(var(--fs-spacing-base) * 9);
    --fs-spacing-10x: calc(var(--fs-spacing-base) * 10);
    --fs-spacing-11x: calc(var(--fs-spacing-base) * 11);
    --fs-spacing-12x: calc(var(--fs-spacing-base) * 12);
    --fs-spacing-13x: calc(var(--fs-spacing-base) * 13);
    --fs-spacing-14x: calc(var(--fs-spacing-base) * 14);
    --fs-spacing-15x: calc(var(--fs-spacing-base) * 15);
    --fs-spacing-16x: calc(var(--fs-spacing-base) * 16);
    --fs-spacing-17x: calc(var(--fs-spacing-base) * 17);
    --fs-spacing-18x: calc(var(--fs-spacing-base) * 18);
    --fs-spacing-19x: calc(var(--fs-spacing-base) * 19);
    --fs-spacing-20x: calc(var(--fs-spacing-base) * 20);
    --fs-spacing-21x: calc(var(--fs-spacing-base) * 21);
    --fs-spacing-22x: calc(var(--fs-spacing-base) * 22);
    --fs-spacing-23x: calc(var(--fs-spacing-base) * 23);
    --fs-spacing-24x: calc(var(--fs-spacing-base) * 24);
    --fs-spacing-25x: calc(var(--fs-spacing-base) * 25);
    --fs-spacing-26x: calc(var(--fs-spacing-base) * 26);
    --fs-spacing-27x: calc(var(--fs-spacing-base) * 27);
    --fs-spacing-28x: calc(var(--fs-spacing-base) * 28);
    --fs-spacing-29x: calc(var(--fs-spacing-base) * 29);
    --fs-spacing-30x: calc(var(--fs-spacing-base) * 30);
}