auditly/index.css

@import "tailwindcss";

:root {
    /* Light theme variables - using new Figma color palette */
    --background-primary    : #FFFFFF;
    /* Base White */
    --background-secondary  : #FDFDFD;
    /* Gray 6 */
    --background-tertiary   : #FAFAFA;
    /* Gray 5 */
    --text-primary          : #0A0D12;
    /* Dark 7 */
    --text-secondary        : #717680;
    /* Dark 2 */
    --text-tertiary         : #A4A7AE;
    /* Gray 1 */
    --accent                : #5E48FC;
    /* Brand Main */
    --accent-hover          : #4C3CF0;
    /* Slightly darker brand */
    --accent-text           : #FFFFFF;
    /* Base White */
    --border-color          : #E9EAEB;
    /* Gray 3 */
    --border-light          : #F5F5F5;
    /* Gray 4 */
    --sidebar-bg            : #FDFDFD;
    /* Gray 6 */
    --sidebar-text          : #717680;
    /* Dark 2 */
    --sidebar-active-bg     : #5E48FC;
    /* Brand Main */
    --sidebar-active-text   : #FFFFFF;
    /* Base White */
    --input-bg              : #F5F5F5;
    /* Gray 4 */
    --input-border          : #E9EAEB;
    /* Gray 3 */
    --input-placeholder     : #717680;
    /* Dark 2 */
    --button-secondary-bg   : #F5F5F5;
    /* Gray 4 */
    --button-secondary-hover: #E9EAEB;
    /* Gray 3 */
    --status-red            : #F63D68;
    /* Other Red */
    --status-green          : #3CCB7F;
    /* Other Green */
    --status-orange         : #FF4405;
    /* Other Orange */
    --status-yellow         : #FEEE95;
    /* Other Yellow */
}

.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 */
}

* {
    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);
}