/*
 * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

:root {
    --background: #f5f5f5;
    --foreground: #171717;

    --md-contained-primary-background: linear-gradient(77.74deg, #eb4f63 11.16%, #fa7b3f 99.55%);
    --md-contained-primary-hover-background: linear-gradient(77.74deg, #d0364b 11.16%, #f2621f 99.55%);
}

html[data-color-scheme='light'] {
    color-scheme: light;

    --md-palette-background-paper: #ffffff6b;
    --md-palette-border-color-paper: #ffffffd6;

    background: var(--background);
}

html[data-color-scheme='dark'] {
    color-scheme: dark;

    --background: #1E1E24;
    --foreground: #ededed;

    --md-palette-background-paper: #0f0f0f41;
    --md-palette-border-color-paper: #2d2d2d;

    --mui-palette-background-paper: #141414;

    background: var(--background);
}

.MuiButton-colorPrimary:not(.MuiButton-outlined) {
    background: var(--md-contained-primary-background);
    color: #fff;
}

.MuiButton-colorPrimary:not(.MuiButton-outlined):hover {
    background: var(--md-contained-primary-hover-background);
    color: #fff;
}

.MuiPaper-root {
    border-radius: 15px !important;
    border: 1px solid var(--md-palette-border-color-paper);
}

body {
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.MuiBox-root {
    position: relative;
    z-index: 1;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}
