@font-face {
	font-family: "Quicksand";
	font-style: normal;
    font-weight: 300;
	font-display: swap;
    src: url("../fonts/Quicksand-Light.ttf") format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Quicksand-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Quicksand-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Quicksand-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Quicksand-Bold.ttf") format("truetype");
}

:root {
    --app-font-sans: "Quicksand", ui-sans-serif, system-ui, sans-serif;
    --bs-font-sans-serif: var(--app-font-sans);
    --shell-background: #FAF8F6;
    --shell-surface: #FFFFFF;
    --shell-primary: #6F3C8B;
    --shell-primary-dark: #56306C;
    --shell-secondary: #625B68;
    --shell-text: #24182D;
    --shell-muted: #6E6673;
    --shell-border: #E4DDE7;
    color-scheme: light;

    
}

html {
    font-synthesis: none;

    --tonal-primary: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-primary));
    --tonal-secondary: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-secondary));
    --tonal-tertiary: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-tertiary));
    --tonal-info: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-info));
    --tonal-success: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-success));
    --tonal-warn: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-warning));
    --tonal-error: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-error));
}

html[data-theme="dark"] {
    --shell-background: #161118;
    --shell-surface: #211A25;
    --shell-primary: #B185C6;
    --shell-primary-dark: #936AA8;
    --shell-secondary: #B8AFBC;
    --shell-text: #F6F1F7;
    --shell-muted: #C4B9C8;
    --shell-border: #3B3040;
    color-scheme: dark;

    --tonal-primary: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-primary));
    --tonal-secondary: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-secondary));
    --tonal-tertiary: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-tertiary));
    --tonal-info: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-info));
    --tonal-success: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-success));
    --tonal-warn: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-warning));
    --tonal-error: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-error));
}


body {
    font-family: var(--app-font-sans);
}

.ord-nowrap {
    white-space: nowrap;
}

.ord-centered-panel {
    min-height: calc(100dvh - 7.5rem);
    padding: 1.5rem 1rem;
}

.ord-centered-panel__content {
    width: min(100%, 28rem);
}

.tonal-surface-primary {
    background-color: var(--tonal-primary);
}

.tonal-surface-secondary {
    background-color: var(--tonal-secondary);
}

.tonal-surface-tertiary {
    background-color: var(--tonal-tertiary);
}

.tonal-surface-info {
    background-color: var(--tonal-info);
}

.tonal-surface-success {
    background-color: var(--tonal-success);
}

.tonal-surface-warn {
    background-color: var(--tonal-warn);
}

.tonal-surface-error {
    background-color: var(--tonal-error);
}