/* OutWit.Shared.Blazor.Shell - Material 3 Design Tokens */

:root {
    /* OutWit Brand Colors */
    --ow-navy: #2B3C59;
    --ow-lime: #50FE30;

    /* Material 3 Surface Colors */
    --md-sys-color-surface: #F5F7FA;
    --md-sys-color-on-surface: #0F1626;
    --md-sys-color-surface-variant: #E4EAF2;
    --md-sys-color-outline: #737A87;
    --md-sys-color-outline-variant: #dfe3ea;
    --md-sys-color-primary: #2e3c5d;
    --md-sys-color-primary-contrast: #ffffff;
    --shadow-rgb: 17 24 39;
}

/* Tonal button */
.m3-tonal {
    background: color-mix(in oklab, var(--ow-lime) 28%, var(--md-sys-color-surface));
    color: #121418;
}

/* Shell & Content */
.m3-shell {
    display: grid;
    grid-template-columns: 84px 1fr;
}

.m3-content {
    padding: 24px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    min-height: calc(100vh - 64px);
}

/* Card */
.m3-card {
    background: color-mix(in oklab, var(--md-sys-color-surface) 88%, var(--md-sys-color-surface-variant));
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 12px;
}

/* Page header */
.m3-page-header {
    margin-bottom: 24px;
}

.m3-page-title {
    font-weight: 500;
}

/* Utility classes */
.mud-height-full {
    height: 100%;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}