auditly/index.css

@import "tailwindcss";

:root {


    --background-primary  : #FFFFFF;
    --background-secondary: #FDFDFD;
    --background-tertiary : #FAFAFA;

    --text-primary  : #0A0D12;
    --text-secondary: #717680;
    --text-tertiary : #A4A7AE;

    --accent      : ##3399FF;
    --accent-hover: #4C3CF0;
    --accent-text : #FFFFFF;

    --border-color: #E9EAEB;
    --border-light: #F5F5F5;

    --sidebar-bg         : #FDFDFD;
    --sidebar-text       : #717680;
    --sidebar-active-bg  : #3399FF;
    --sidebar-active-text: #FFFFFF;

    --input-bg         : #F5F5F5;
    --input-border     : #E9EAEB;
    --input-placeholder: #717680;

    --button-secondary-bg   : #F5F5F5;
    --button-secondary-hover: #E9EAEB;

    --color-red         : #F63D68;
    --color-green       : #3CCB7F;
    --color-orange      : #FF4405;
    --color-light-orange: #F38744;
    --color-yellow      : #FEEE95;

    --gray-0  : #FFFFFF;
    --gray-50 : #F7F7F8;
    --gray-100: #F1F2F4;
    --gray-200: #E2E5E9;
    --gray-300: #CBD0D7;
    --gray-400: #99A1AE;
    --gray-500: #6C7889;
    --gray-600: #515A67;
    --gray-700: #2D3239;
    --gray-800: #24282E;
    --gray-900: #121417;

    --neutral-100: #A4A7AE;
    --neutral-200: #D5D7DA;
    --neutral-300: #E9EAEB;
    --neutral-400: #f5f5f5;
    --neutral-500: #FAFAFA;
    --neutral-600: #FDFDFD;
    --neutral-700: #FEFEFE;

    --button-bg-primary    : #39F;
    --button-border-primary: #66B2FF;
}

.dark {
    /* Dark theme variables - using new Figma color palette */
    --background-primary    : #0A0D12;
    /* Dark 7 */
    --background-secondary  : #181D27;
    /* Dark 6 */
    --background-tertiary   : #252B37;
    /* Dark 5 */
    --text-primary          : #FDFDFD;
    /* Gray 6 */
    --text-secondary        : #D5D7DA;
    /* Gray 2 */
    --text-tertiary         : #A4A7AE;
    /* Gray 1 */
    --accent                : #5E48FC;
    /* Brand Main */
    --accent-hover          : #6B56FF;
    /* Slightly lighter brand */
    --accent-text           : #FFFFFF;
    /* Base White */
    --border-color          : #535862;
    /* Dark 3 */
    --border-light          : #414651;
    /* Dark 4 */
    --sidebar-bg            : #181D27;
    /* Dark 6 */
    --sidebar-text          : #D5D7DA;
    /* Gray 2 */
    --sidebar-active-bg     : #5E48FC;
    /* Brand Main */
    --sidebar-active-text   : #FFFFFF;
    /* Base White */
    --input-bg              : #252B37;
    /* Dark 5 */
    --input-border          : #414651;
    /* Dark 4 */
    --input-placeholder     : #717680;
    /* Dark 2 */
    --button-secondary-bg   : #414651;
    /* Dark 4 */
    --button-secondary-hover: #535862;
    /* Dark 3 */
    --status-red            : #F63D68;
    /* Other Red */
    --status-green          : #3CCB7F;
    /* Other Green */
    --status-orange         : #FF4405;
    /* Other Orange */
    --status-yellow         : #FEEE95;
    /* Other Yellow */
    --neutral-200           : #717670;
    --neutral-300           : #535862;
    --neutral-400           : #414651;
    --neutral-500           : #252B37;
    --neutral-600           : #181D27;
    --neutral-700           : #0A0D12;

    --gray-900: #FFFFFF;
    --gray-800: #F7F7F8;
    --gray-700: #F1F2F4;
    --gray-600: #E2E5E9;
    --gray-500: #CBD0D7;
    --gray-400: #99A1AE;
    --gray-300: #6C7889;
    --gray-200: #515A67;
    --gray-100: #2D3239;
    --gray-50 : #24282E;
    --gray-0  : #121417;

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color       : var(--background-primary);
    color                  : var(--text-primary);
}

#root {
    height: 100vh;
}

/* Custom slider styling */
.slider {
    -webkit-appearance: none;
    appearance        : none;
    background        : var(--border-color);
    outline           : none;
    border-radius     : 8px;
    transition        : all 0.2s ease;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance        : none;
    width             : 20px;
    height            : 20px;
    border-radius     : 50%;
    background        : var(--accent);
    cursor            : pointer;
    border            : 2px solid white;
    box-shadow        : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition        : all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    background: var(--accent-hover);
    transform : scale(1.1);
}

.slider::-moz-range-thumb {
    width        : 20px;
    height       : 20px;
    border-radius: 50%;
    background   : var(--accent);
    cursor       : pointer;
    border       : 2px solid white;
    box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition   : all 0.2s ease;
}

.slider::-moz-range-thumb:hover {
    background: var(--accent-hover);
    transform : scale(1.1);
}

/* Radio button styling */
input[type="radio"] {
    accent-color: var(--accent);
}

/* Focus states */
.slider:focus {
    box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
}

input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
}