@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css";

:root {
    --color-primary: #FF914D;
    --color-primary-hover: #e07b39;

    --color-secondary: #10C0DF;
    --color-secondary-hover: #0da6bf;

    --radius-large: 25px;
    --transition-fast: 0.25s ease;

    --bg: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;

    --text: #222222;
    --text-muted: #555555;
    --message-color: #dddddd;

    --danger: #dc3545;
    --success: #198754;
    --warning: #ffc107;
    --info: #10C0DF;

    --neutral: #e0e0e0;
    
    --loader-bg: #ffffff;
    --loader-color: #10C0DF;
}

:root[data-theme="dark"] {
    --bg:           #121416;  
    --bg-secondary: #1a1d1f;   
    --bg-card:      #1e2226;

    --text: #e0e0e0;
    --text-muted: #999999;
    --message-color: #373737;

    --neutral: #383d45;

    --danger: #ef5350;
    --success: #66bb6a;
    --warning: #ffca28;
    --info: #42a5f5;

    --color-primary: #FF914D;
    --color-primary-hover: #c16527;

    --color-secondary: #10C0DF;
    --color-secondary-hover: #0da6bf;
    
    --loader-bg: #1a1d1f;
    --loader-color: #10C0DF;
}

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--neutral) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-light { background-color: var(--bg-secondary) !important; }
.bg-dark { background-color: #212529 !important; }
.bg-body { background-color: var(--bg) !important; }
.bg-white { background-color: var(--bg) !important; }
.bg-transparent { background-color: transparent !important; }

body {
    margin: 0;
    font-family: "Poppins", "Segoe UI", sans-serif;
    background-color: var(--bg);
    color: var(--text);
    transition: background 0.25s ease, color 0.25s ease;
}

main {
    overflow: auto;
    height: 100%;
}

h1, h2, h3, h4, h5, h6, p, span, label {
    color: var(--text);
}

#blazor-error-ui {
    background: var(--warning);
    color: black;
}

.btn-primary,
button,
.button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background-color var(--transition-fast);
    border: none;
}

.btn-primary:hover,
button:hover,
.button:hover {
    background-color: var(--color-primary-hover);
}

.not-found-container {
    text-align: center;
    padding: 2rem;
    color: var(--text);
}

.not-found-container h1 {
    font-size: 2.2rem;
    color: var(--info);
}

.not-found-container p {
    font-size: 1.3rem;
}

.loading-progress {
    width: 100px;
    height: 100px;
    margin: 20vh auto;
    display: block;
}

.loading-progress circle {
    fill: none;
    stroke-width: 8;
    transform-origin: center;
}

.loading-progress circle:nth-child(1) {
    stroke-dasharray: 157;
    stroke: var(--neutral);
    animation: blazor-loader 1.5s linear infinite;
}

.loading-progress circle:nth-child(2) {
    stroke: var(--color-secondary);
    stroke-dasharray: 157;
}

@keyframes blazor-loader {
    0% { stroke-dashoffset: 157; }
    100% { stroke-dashoffset: 0; }
}


:root[data-font="small"]  { font-size: 13px; }
:root[data-font="medium"] { font-size: 16px; }
:root[data-font="large"]  { font-size: 19px; }

input, textarea, button, select,
.chatbox, .audioPreview,
.btn-primary, .button {
    font-size: inherit !important;
}