/* ============================================================================
   Design tokens — HealthCoreX palette, OwnersInventory shell structure.

   Values are lifted from HealthCorex/wwwroot/css/main.css (the live theme; that
   project's theme.css and site.css are legacy and carry an older blue palette).
   Everything visual in this app resolves to a token here, so a re-theme is one
   file rather than a search-and-replace.
   ============================================================================ */

:root {
    /* ---- Brand ---- */
    --app-primary: #1687a7;
    --app-primary-600: #12768f;
    --app-primary-700: #0e6076;
    --app-primary-soft: #e7f4f8;
    --app-on-primary: #ffffff;

    /* ---- Navigation ----
       OwnersInventory uses a light rail; HealthCoreX is a dark teal sidebar.
       The brief is their structure with these colours, so the rail is dark. */
    --app-rail: #0e2a35;
    --app-rail-hover: #173d4b;
    --app-rail-text: #a9c2cc;
    --app-rail-active: var(--app-primary);
    --app-rail-width: 56px;
    --app-rail-width-open: 216px;

    /* Second column: the module's own pages. Light, so the two read as
       distinct surfaces rather than one wide slab of navy. */
    --app-panel: #ffffff;
    --app-panel-border: #e4e9ef;
    --app-panel-text: #16232b;
    --app-panel-muted: #6b7f8a;
    --app-panel-active-bg: var(--app-primary-soft);
    --app-panel-active-text: var(--app-primary-700);
    --app-panel-width: 208px;

    /* ---- Surfaces ---- */
    --app-bg: #f4f7fa;
    --app-surface: #ffffff;
    --app-surface-sunken: #f6f8fa;
    --app-border: #e4e9ef;
    --app-border-strong: #cfd8e0;

    /* ---- Text ---- */
    --app-text: #16232b;
    --app-muted: #6b7f8a;
    --app-text-inverse: #ffffff;

    /* ---- Status. Always paired with a text label, never colour alone —
       carried over as a rule from HealthCoreX's stylesheet. ---- */
    --app-success: #1baf7a;
    --app-success-bg: #e4f5ee;
    --app-success-text: #12603f;

    --app-warning: #eda100;
    --app-warning-bg: #fdf1e0;
    --app-warning-text: #7a5410;

    --app-info: #2a78d6;
    --app-info-bg: #e4eefb;
    --app-info-text: #1a4d8f;

    --app-danger: #d92d20;
    --app-danger-bg: #fef2f2;
    --app-danger-text: #912018;

    /* ---- Shape & depth ---- */
    /* Tighter than before. Large radii read as roomy, which fights a dense screen — the target
       squares its inputs off entirely; this keeps a hint of softness without the bubble. */
    --app-radius: 6px;
    --app-radius-sm: 4px;
    --app-radius-pill: 999px;
    --app-shadow: 0 1px 2px rgba(16, 40, 52, .04), 0 4px 16px rgba(16, 40, 52, .06);
    --app-shadow-lg: 0 8px 32px rgba(16, 40, 52, .12);

    /* ---- Type ---- */
    /* Inter, as the target uses. Shipped with the app under wwwroot/lib/inter rather than
       fetched from a CDN — naming it in the stack alone only worked on a machine that already
       had it installed, which is why this looked like Segoe UI everywhere. */
    --app-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* 14px, matching the target. This is the base every rem below is measured against. */
    --app-font-size: .875rem;

    /* ---- Layout ---- */
    --app-topbar-height: 56px;
    --app-footer-height: 40px;
}

/* Bootstrap overrides, so stock components inherit the palette instead of
   staying Bootstrap blue. Set on :root because Bootstrap 5.3 reads these. */
:root {
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 22, 135, 167;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius);
    --bs-font-sans-serif: var(--app-font);
    --bs-link-color: var(--app-primary);
    --bs-link-hover-color: var(--app-primary-700);
}