@import url("./controls.css");
@import url("./tables.css");

/* Override semantic tokens on :root or on a .blazor-theme subtree. */
:where(:root, .blazor-theme)
{
    --primary: #3273EB;
    --primary-alt: #fff;
    --error: #b72d4f;
    --warning: #f59e0b;
    --success: #4db649;
    --admin: #c4214f;
    --accent: #08f;
    --accent-bright: #40a6ff;
    --highlight-gold: #ffbd32;
    --text-color: #ADB3CB;
    --text-strong: #fff;
    --text-muted: #b2bed4;
    --text-faint: #ccc;
    --tint: 255 255 255;
    --scrim: 0 0 0;
    --surface-bg: rgb( var( --tint ) / 0.04 );
    --surface-bg-fade: rgb( var( --tint ) / 0.015 );
    --surface-bg-hover: rgb( var( --tint ) / 0.08 );
    --surface-line: rgb( var( --tint ) / 0.1 );
    --surface-line-hover: rgb( var( --tint ) / 0.2 );
    --shadow-sm: 0 1px 2px  rgb( var( --scrim ) / 0.25 );
    --shadow-lg: 0 10px 30px rgb( var( --scrim ) / 0.4 );
    --btn-highlight: rgb( 255 255 255 / 0.18 );
    --btn-highlight-strong: rgb( 255 255 255 / 0.25 );
    --btn-highlight-soft: rgb( 255 255 255 / 0.1 );
    --menu-background: #111;
    --menu-border: 1px solid #244051;
    --menu-option-color: #869bb3;
    --menu-option-colorbg: transparent;
    --menu-option-color-hover: var( --text-strong );
    --menu-option-colorbg-hover: rgb( var( --tint ) / 0.06 );
    --menu-option-color-active: #fff;
    --menu-option-colorbg-active: var( --accent );
    --form-surface: rgb( var( --tint ) / 0.02 );
    --form-divider: rgb( var( --tint ) / 0.06 );
    --form-label-color: #d9deec;
    --input-bg: rgb( 0 0 0 / 0.35 );
    --input-bg-focus: rgb( 0 0 0 / 0.45 );
    --input-border: rgb( var( --tint ) / 0.18 );
    --input-border-hover: rgb( var( --tint ) / 0.32 );
    --input-text: #e4ecff;
    --input-placeholder: rgb( var( --tint ) / 0.4 );
    --input-focus-ring: rgb( from var( --primary ) r g b / 0.25 );
    --container-max-width: 1400px;
    --background: #181f2f;
    --background-dark: #080f1f;
    --header-background: #04131c;
    --font-body: system-ui, sans-serif;
    --font-heading: var( --font-body );
    --font-mono: ui-monospace, monospace;
    --font-icon: "Material Symbols Rounded";
    --font-size-base: 1rem;
    --font-size-small: 0.8rem;
    --font-size-large: 1.25rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height: 1.5;
    --line-height-tight: 1.2;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --sticky-offset: 0px;
}

.blazor-theme
{
    font-family: var( --font-body );
    color: var( --text-color );
    line-height: var( --line-height );
}