/* Emporium Collections: source palette from dev/emporium_app/logo/LIRE-MOI.txt.
   Silver is decorative; use the darker muted token for readable UI text. */
:root {
    color-scheme: light;
    --brand-navy: #0b2042;
    --brand-white: #fff;
    --brand-silver: #aabbd3;
    --ink: var(--brand-navy);
    --muted: #526780;
    --paper: #f2f5f9;
    --panel: var(--brand-white);
    --line: #d8e1ed;
    --control-line: #8595ab;
    --accent: var(--brand-navy);
    --accent-hover: #193b68;
    --selection: #e6edf6;
    --surface-soft: #f6f8fb;
    --focus: #617fa8;
    --error: #9e3030;
    --success: #17613b;
    --font-ui: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius-control: .45rem;
    --radius-panel: .75rem;
    --control-height: 2.25rem;
    --action-height: 2.25rem;
    --action-font-size: .875rem;
    --action-weight: 600;
    --icon-size: 1.125rem;
    --touch-target: 2.75rem;
    --shadow-panel: 0 8px 28px rgb(11 32 66 / 6%);
    font-family: var(--font-ui);
    font-variant-numeric: lining-nums;
    accent-color: var(--accent);
}

.brand-logo { display: block; width: 100%; max-width: 16rem; flex: none; }
.brand-logo img { display: block; width: 100%; height: auto; }
.brand-mark { display: block; flex: none; width: 1.75rem; }
.brand-mark img { display: block; width: 100%; height: auto; }

:where(h1, h2, h3, legend) { font-family: var(--font-ui); }
:where(button, input, select, textarea) { font-family: inherit; }
:where(input, select, textarea)::placeholder { color: var(--muted); opacity: 1; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
:where(.amount, .metric-value, output) { font-variant-numeric: tabular-nums; }
::selection { background: var(--selection); color: var(--ink); }
/* Component display rules must not reveal controls hidden by their workflow. */
[hidden] { display: none !important; }
@media (max-width: 44rem), (pointer: coarse) {
    :root { --control-height: var(--touch-target); --action-height: var(--touch-target); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}