/* Color system variables mapping */
:root {
    --tertiary-fixed: #fadfb8;
    --on-primary: #ffffff;
    --error: #ba1a1a;
    --on-secondary-fixed: #0b1c30;
    --secondary: #505f76;
    --surface-variant: #e0e3e5;
    --surface-container: #eceef0;
    --on-primary-fixed: #111c2d;
    --on-error: #ffffff;
    --primary-fixed-dim: #bcc7de;
    --secondary-fixed-dim: #b7c8e1;
    --on-surface-variant: #45474c;
    --on-background: #191c1e;
    --error-container: #ffdad6;
    --inverse-surface: #2d3133;
    --surface: #f7f9fb;
    --outline-variant: #c5c6cd;
    --on-primary-fixed-variant: #3c475a;
    --primary-fixed: #d8e3fb;
    --on-secondary: #ffffff;
    --tertiary-fixed-dim: #ddc39d;
    --surface-dim: #d8dadc;
    --on-secondary-container: #54647a;
    --surface-container-lowest: #ffffff;
    --on-tertiary: #ffffff;
    --background: #f7f9fb;
    --secondary-container: #d0e1fb;
    --on-tertiary-container: #a38c6a;
    --on-primary-container: #8590a6;
    --inverse-on-surface: #eff1f3;
    --tertiary: #1e1200;
    --surface-container-low: #f2f4f6;
    --surface-container-highest: #e0e3e5;
    --secondary-fixed: #d3e4fe;
    --on-tertiary-fixed: #271902;
    --primary: #091426;
    --tertiary-container: #35260c;
    --inverse-primary: #bcc7de;
    --on-surface: #191c1e;
    --on-tertiary-fixed-variant: #564427;
    --surface-tint: #545f73;
    --surface-bright: #f7f9fb;
    --on-secondary-fixed-variant: #38485d;
    --on-error-container: #93000a;
    --primary-container: #1e293b;
    --outline: #75777d;
}

/* Custom class styles mapping */
.text-primary { color: var(--primary) !important; }
.text-on-primary { color: var(--on-primary) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.text-on-primary-container { color: var(--on-primary-container) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-secondary-fixed { color: var(--secondary-fixed-dim) !important; }
.text-on-surface { color: var(--on-surface) !important; }

.bg-background { background-color: var(--background) !important; }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-primary-container { background-color: var(--primary-container) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-on-primary { background-color: var(--on-primary) !important; }
.bg-surface-variant { background-color: var(--surface-variant) !important; }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }

.border-outline-variant { border-color: var(--outline-variant) !important; }
.border-on-primary-container\/30 { border-color: rgba(133, 144, 166, 0.3) !important; }

/* Font mappings */
.font-display-lg {
    font-size: 48px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
}

.font-body-lg {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.font-headline-md {
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.font-body-sm {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.font-body-md {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.font-label-md {
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

.font-label-sm {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}

.font-headline-lg {
    font-size: 32px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}

/* Grid & Padding mappings */
.max-w-container-max {
    max-width: 1280px !important;
}

.px-gutter {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.mb-md { margin-bottom: 16px !important; }
.mb-xs { margin-bottom: 4px !important; }
.mb-lg { margin-bottom: 24px !important; }
.mb-xl { margin-bottom: 40px !important; }
.mb-24 { margin-bottom: 96px !important; }

.py-md {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.py-lg {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.p-xl { padding: 40px !important; }
.p-lg { padding: 24px !important; }

.gap-xs { gap: 4px !important; }
.gap-sm { gap: 8px !important; }
.gap-md { gap: 16px !important; }
.gap-lg { gap: 24px !important; }
.gap-xl { gap: 40px !important; }

.pb-xl { padding-bottom: 40px !important; }
.pt-32 { padding-top: 128px !important; }

.table-row-hover:hover {
    background-color: #f7f9fb !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}