/* ==================== Global Utility Classes ==================== */
/* This file should be loaded LAST in App.razor. */

/* --- Font Size --- */
.fs-0.fs-0 { font-size: var(--fs-0) !important; }
.fs-0-5.fs-0-5 { font-size: var(--fs-0-5) !important; }
.fs-1.fs-1 { font-size: var(--fs-1) !important; }
.fs-2.fs-2 { font-size: var(--fs-2) !important; }
.fs-3.fs-3 { font-size: var(--fs-3) !important; }
.fs-4.fs-4 { font-size: var(--fs-4) !important; }
.fs-5.fs-5 { font-size: var(--fs-5) !important; }
.fs-6.fs-6 { font-size: var(--fs-6) !important; }

/* --- Font Theme ---
   --font-size-scale nudges html font-size so all rem tokens stay visually
   consistent across typefaces with different natural x-heights. --- */
[data-font-theme="modern"]    { --font-family-current: var(--font-family-modern);    --font-size-scale: 1; }
[data-font-theme="humanist"]  { --font-family-current: var(--font-family-humanist);  --font-size-scale: 0.98; }
[data-font-theme="editorial"] { --font-family-current: var(--font-family-editorial); --font-size-scale: 0.93; }
[data-font-theme="technical"] { --font-family-current: var(--font-family-technical); --font-size-scale: 0.96; }

html { font-size: calc(16px * var(--font-size-scale)); }

html,
body,
.mud-typography,
.mud-button-root,
.mud-input-slot,
.mud-input-label,
.mud-chip-content {
    font-family: var(--font-family-current) !important;
}

/* --- Text Color: token assignment + root color --- */
.tc-bp.tc-bp {
    --tc-color: var(--waterstons-blue-primary);
    color: var(--tc-color) !important;
}
.tc-bs.tc-bs { --tc-color: var(--waterstons-blue-secondary); color: var(--tc-color) !important; }
.tc-or.tc-or { --tc-color: var(--waterstons-orange); color: var(--tc-color) !important; }
.tc-wh.tc-wh { --tc-color: var(--waterstons-white); color: var(--tc-color) !important; }
.tc-gr.tc-gr { --tc-color: var(--waterstons-green); color: var(--tc-color) !important; }

/* --- Text Color: Mud component internals (labels/inputs/icons/helper text) --- */
.tc-bp.tc-bp .mud-typography,
.tc-bs.tc-bs .mud-typography,
.tc-or.tc-or .mud-typography,
.tc-wh.tc-wh .mud-typography,
.tc-gr.tc-gr .mud-typography,
.tc-bp.tc-bp .mud-input-label,
.tc-bs.tc-bs .mud-input-label,
.tc-or.tc-or .mud-input-label,
.tc-wh.tc-wh .mud-input-label,
.tc-gr.tc-gr .mud-input-label,
.tc-bp.tc-bp .mud-input-label.mud-input-focused,
.tc-bs.tc-bs .mud-input-label.mud-input-focused,
.tc-or.tc-or .mud-input-label.mud-input-focused,
.tc-wh.tc-wh .mud-input-label.mud-input-focused,
.tc-gr.tc-gr .mud-input-label.mud-input-focused,
.tc-bp.tc-bp .mud-input-slot,
.tc-bs.tc-bs .mud-input-slot,
.tc-or.tc-or .mud-input-slot,
.tc-wh.tc-wh .mud-input-slot,
.tc-gr.tc-gr .mud-input-slot,
.tc-bp.tc-bp input.mud-input-slot,
.tc-bs.tc-bs input.mud-input-slot,
.tc-or.tc-or input.mud-input-slot,
.tc-wh.tc-wh input.mud-input-slot,
.tc-gr.tc-gr input.mud-input-slot,
.tc-bp.tc-bp textarea.mud-input-slot,
.tc-bs.tc-bs textarea.mud-input-slot,
.tc-or.tc-or textarea.mud-input-slot,
.tc-wh.tc-wh textarea.mud-input-slot,
.tc-gr.tc-gr textarea.mud-input-slot,
.tc-bp.tc-bp .mud-icon-root,
.tc-bs.tc-bs .mud-icon-root,
.tc-or.tc-or .mud-icon-root,
.tc-wh.tc-wh .mud-icon-root,
.tc-gr.tc-gr .mud-icon-root,
.tc-bp.tc-bp .mud-input-helper-text,
.tc-bs.tc-bs .mud-input-helper-text,
.tc-or.tc-or .mud-input-helper-text,
.tc-wh.tc-wh .mud-input-helper-text,
.tc-gr.tc-gr .mud-input-helper-text {
    color: var(--tc-color) !important;
}

/* Keep validation/error state in MudBlazor visible (red) even inside tc-* wrappers */
.mud-input-control.mud-input-error .mud-input-label,
.mud-input-control.mud-input-error .mud-input-slot,
.mud-input-control.mud-input-error .mud-input-helper-text,
.mud-input-helper-text.mud-input-error,
.validation-message {
    color: var(--mud-palette-error) !important;
}

/* --- Background Color --- */
.bc-bp.bc-bp { background-color: var(--waterstons-blue-primary) !important; }
.bc-bs.bc-bs { background-color: var(--waterstons-blue-secondary) !important; }
.bc-or.bc-or { background-color: var(--waterstons-orange) !important; }
.bc-wh.bc-wh { background-color: var(--waterstons-white) !important; }
.bc-gr.bc-gr { background-color: var(--waterstons-green) !important; }
.bc-tr.bc-tr { background-color: transparent !important; }

.br-0.br-0 { border-radius: 999px; }
.br-1.br-1 { border-radius: 5px; }
.br-2.br-2 { border-radius: 10px; }
.br-3.br-3 { border-radius: 15px; }