/**
 * Application UI theme — semantic tokens (no hue in names).
 * Brand palette (XYROLIMS logo): primary teal #0F5F54, accent #FFAA00.
 *
 * Chrome / accent: shell (sidebar, navbars) + highlights
 * Action: primary buttons & focus on light surfaces (e.g. login)
 * Surfaces / text / border: forms and light pages
 * Danger: validation & destructive states
 */
:root {
    /* Chrome: teal family from logo primary */
    --theme-chrome-deep: #0a453c;
    --theme-chrome-mid: #0f5f54;
    --theme-chrome-muted: #168572;

    /* Accent: logo orange + variants */
    --theme-accent: #ffaa00;
    --theme-accent-secondary: #e69900;
    --theme-accent-subtle: #fff4e6;

    --theme-chrome-text: #ecf7f4;
    --theme-accent-foreground: #1a1400;
    --theme-on-inverse: #ffffff;

    /* Primary action = logo teal */
    --theme-action: #0f5f54;
    --theme-action-hover: #0c4e45;

    --theme-body-text: #0f2e28;

    --theme-surface-backdrop: #f4f9f7;
    --theme-surface-muted: #eef5f2;
    --theme-surface-card: #ffffff;
    --theme-surface-subtle: #e3ede9;

    --theme-text-strong: #0a241f;
    --theme-text-muted: #4d6b64;
    --theme-text-subtle: #7a948c;
    --theme-text-label: #1e4038;

    --theme-border-default: #d4e4de;
    --theme-border-hover: #bccfc6;

    --theme-danger: #c23a3a;
    --theme-danger-bg: #fdeeee;
    --theme-danger-border: #f0c5c5;
    --theme-danger-text: #8f2929;

    /* Bootstrap pages that load styles.css alongside ui-theme */
    --bs-primary: #0f5f54;
    --bs-primary-rgb: 15, 95, 84;
    --bs-link-color: #0f5f54;
    --bs-link-hover-color: #0c4e45;
}

/* XYROLIMS mark on dark chrome navbars (full-color logo targets light backgrounds) */
.lims-top-navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-surface-card);
    padding: 6px 12px;
    border-radius: 4px;
    line-height: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.lims-top-navbar-brand img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}