auditly/index.css

@import "tailwindcss";

/* Blinking cursor animation for chat input */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

:root {


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

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

    --accent      : #5E48FC;
    --accent-hover: #4C3CF0;
    --accent-text : #FFFFFF;

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

    --sidebar-bg         : #FDFDFD;
    --sidebar-text       : #717680;
    --sidebar-active-bg  : #5E48FC;
    --sidebar-active-text: #FFFFFF;

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

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

    --color-red         : #FB3748;
    --color-green       : #1FC16B;
    --color-orange      : #5E48FC;
    --color-light-orange: #F38744;
    --color-yellow      : #FEEE95;

    --Neutrals-NeutralState950: #0A0D12;
    --Neutrals-NeutralSlate900: #181D27;
    --Neutrals-NeutralSlate800: #252B37;
    --Neutrals-NeutralSlate700: #414651;
    --Neutrals-NeutralSlate600: #535862;
    --Neutrals-NeutralSlate500: #7A7680;
    --Neutrals-NeutralSlate400: #A4A7AE;
    --Neutrals-NeutralSlate300: #D5D7DA;
    --Neutrals-NeutralSlate200: #E9EAEB;
    --Neutrals-NeutralSlate100: #F5F5F5;
    --Neutrals-NeutralSlate50 : #FAFAFA;
    --Neutrals-NeutralSlate0  : #FDFDFD;

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

    --Brand-Orange: #3399FF;

    --Other-Red  : #FB3748;
    --Other-Green: #1FC16B;
    --Other-White: #FFFFFF;

    --button-bg-primary    : #5E48FC;
    --button-border-primary: #7B64FF;
}

.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;

    --Neutrals-NeutralState950: #FDFDFD;
    --Neutrals-NeutralSlate900: #FAFAFA;
    --Neutrals-NeutralSlate800: #F5F5F5;
    --Neutrals-NeutralSlate700: #E9EAEB;
    --Neutrals-NeutralSlate600: #D5D7DA;
    --Neutrals-NeutralSlate500: #A4A7AE;
    --Neutrals-NeutralSlate400: #7A7680;
    --Neutrals-NeutralSlate300: #535862;
    --Neutrals-NeutralSlate200: #414651;
    --Neutrals-NeutralSlate100: #252B37;
    --Neutrals-NeutralSlate50 : #181D27;
    --Neutrals-NeutralSlate0  : #0A0D12;

}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Neue Montreal';
    src        : url('/fonts/NeueMontreal-Regular.woff2') format('woff2'),
        url('/fonts/NeueMontreal-Regular.woff') format('woff');
    font-weight : normal;
    font-style  : normal;
    font-display: swap;
}



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