Theme Configurator

:root {
    /* primary (#6366f1) */
    --color-primary-50: #f5f6f9;
    --color-primary-100: #ebebf5;
    --color-primary-200: #cbccec;
    --color-primary-300: #9ea0e6;
    --color-primary-400: #6265e4;
    --color-primary-500: #151aea;
    --color-primary-600: #161ac0;
    --color-primary-700: #191c94;
    --color-primary-800: #191b6c;
    --color-primary-900: #171845;
    --color-primary-950: #0f0f24;

    /* secondary (#8b5cf6) */
    --color-secondary-50: #f7f5f9;
    --color-secondary-100: #eeeaf5;
    --color-secondary-200: #d4caed;
    --color-secondary-300: #b39be8;
    --color-secondary-400: #885de9;
    --color-secondary-500: #530df2;
    --color-secondary-600: #4810c6;
    --color-secondary-700: #3d1599;
    --color-secondary-800: #31166f;
    --color-secondary-900: #241547;
    --color-secondary-950: #150e25;

    /* accent (#ec4899) */
    --color-accent-50: #f9f5f7;
    --color-accent-100: #f5ebf0;
    --color-accent-200: #ebcbdb;
    --color-accent-300: #e59fc1;
    --color-accent-400: #e364a2;
    --color-accent-500: #e7187e;
    --color-accent-600: #be186a;
    --color-accent-700: #931b56;
    --color-accent-800: #6b1a42;
    --color-accent-900: #44182e;
    --color-accent-950: #240f19;

    /* success (#22c55e) */
    --color-success-50: #f6f9f7;
    --color-success-100: #ebf4ef;
    --color-success-200: #cde9d8;
    --color-success-300: #a4e0ba;
    --color-success-400: #6cda95;
    --color-success-500: #25da68;
    --color-success-600: #23b358;
    --color-success-700: #238b49;
    --color-success-800: #1f6539;
    --color-success-900: #1a4129;
    --color-success-950: #102317;

    /* warning (#f59e0b) */
    --color-warning-50: #f9f8f5;
    --color-warning-100: #f5f1ea;
    --color-warning-200: #ede0c9;
    --color-warning-300: #e9cc9a;
    --color-warning-400: #ebb65b;
    --color-warning-500: #f59e0a;
    --color-warning-600: #c9830d;
    --color-warning-700: #9b6813;
    --color-warning-800: #704e15;
    --color-warning-900: #473415;
    --color-warning-950: #251d0e;

    /* danger (#ef4444) */
    --color-danger-50: #f9f5f5;
    --color-danger-100: #f5ebeb;
    --color-danger-200: #eccbcb;
    --color-danger-300: #e69e9e;
    --color-danger-400: #e56161;
    --color-danger-500: #eb1414;
    --color-danger-600: #c11515;
    --color-danger-700: #951919;
    --color-danger-800: #6c1818;
    --color-danger-900: #451717;
    --color-danger-950: #240f0f;

}