/* File: viewers/ohif/docker/evemeta-theme.css
 *
 * Token overlay for the upstream OHIF v3.10.2 image. Loaded AFTER
 * app.bundle.css so our :root + utility overrides win.
 *
 * Accent: pale periwinkle (DESIGN.md sec.2, after the teal -> periwinkle
 * switch on 2026-05-27).
 *
 * Two layers:
 *   (1) shadcn-style HSL tokens at :root (small subset of ui-next).
 *   (2) Direct overrides on OHIF's compiled Tailwind palette (the
 *       majority of the chrome).
 *
 * This is a CSS-only overlay -- we do NOT fork the SPA yet. Deep
 * fork is task #36.
 *
 * Lint-exempt: this file translates between two token systems and
 * MUST express literal HSL + hex components.
 */

/* ============================================================
 * Layer 1: shadcn HSL tokens (ui-next components)
 * ============================================================ */
:root {
  --background:        216 19% 5%;
  --foreground:        210 22% 96%;
  --card:              218 16% 10%;
  --card-foreground:   210 22% 96%;
  --popover:           218 16% 10%;
  --popover-foreground:210 22% 96%;
  --muted:             210 12% 3%;
  --muted-foreground:  214 9% 46%;

  --primary:             225 35% 75%;   /* periwinkle */
  --primary-foreground:  216 19% 5%;    /* dark text on periwinkle */
  --secondary:           218 16% 10%;
  --secondary-foreground:210 22% 96%;
  --accent:              227 33% 67%;   /* periwinkle 600 */
  --accent-foreground:   216 19% 5%;
  --ring:                225 35% 75%;
  --highlight:           225 35% 75%;

  --border:            217 13% 19%;
  --input:             215 13% 26%;

  --destructive:           0 68% 57%;
  --destructive-foreground:0 0% 100%;

  --success-bg: #15181d;  --success-border: #1f9d65; --success-text: #1f9d65;
  --info-bg:    #15181d;  --info-border:    #a9b4d6; --info-text:    #a9b4d6;
  --warning-bg: #15181d;  --warning-border: #d99425; --warning-text: #d99425;
  --error-bg:   #15181d;  --error-border:   #dc4646; --error-text:   #dc4646;

  --radius: 6px;
}

/* ============================================================
 * Layer 2: OHIF Tailwind palette overrides
 *
 * Mapping with periwinkle:
 *   primary-dark    -> surface-canvas   (#0b0d10)
 *   primary-main    -> periwinkle 500   (#a9b4d6)
 *   primary-active  -> periwinkle 500   (#a9b4d6)
 *   primary-light   -> periwinkle 200   (#c8cee4)
 *   secondary-*     -> surface tiers    (canvas / raised)
 *   indigo-dark     -> surface-canvas
 *   customblue-*    -> surface tiers / border-strong / text-secondary
 *   customgray-100  -> border-default
 *   common-*        -> text scale
 * ============================================================ */

/* Backgrounds ------------------------------------------------- */
.bg-primary-dark    { background-color: #0b0d10 !important; }
.bg-primary-main    { background-color: #a9b4d6 !important; }
.bg-primary-active  { background-color: #a9b4d6 !important; }
.bg-primary-light   { background-color: #c8cee4 !important; }
.bg-secondary-dark  { background-color: #070809 !important; }
.bg-secondary-main  { background-color: #15181d !important; }
.bg-secondary-light { background-color: #3a414b !important; }
.bg-indigo-dark     { background-color: #0b0d10 !important; }
.bg-customblue-10   { background-color: #070809 !important; }
.bg-customblue-30   { background-color: #15181d !important; }
.bg-customblue-40   { background-color: #3a414b !important; }
.bg-customblue-400  { background-color: #a8b0bb !important; }
.bg-customgray-100  { background-color: #2a2f37 !important; }
.bg-common-bright   { background-color: #f4f6f8 !important; }
.bg-bkg-low         { background-color: #0b0d10 !important; }
.bg-bkg-med         { background-color: #15181d !important; }
.bg-inputfield-placeholder { background-color: #15181d !important; }

/* Text colors -- on periwinkle, text needs to be DARK ---------
 * For elements that sit ON the primary background (e.g. button
 * label inside .bg-primary-main), the inherited text would be
 * white. Force dark instead. */
.bg-primary-main, .bg-primary-active, .bg-primary-light {
  color: #0b0d10 !important;
}
.bg-primary-main *, .bg-primary-active *, .bg-primary-light * {
  color: #0b0d10 !important;
  fill: #0b0d10 !important;   /* SVG icons inside primary buttons */
}

.text-primary-light   { color: #c8cee4 !important; }
.text-primary-main    { color: #a9b4d6 !important; }
.text-primary-active  { color: #a9b4d6 !important; }
.text-secondary-light { color: #a8b0bb !important; }
.text-common-bright   { color: #f4f6f8 !important; }
.text-common-light    { color: #a8b0bb !important; }
.text-common-dark     { color: #6b7480 !important; }
.text-aqua-pale       { color: #c8cee4 !important; }
.text-actions-primary { color: #a9b4d6 !important; }
.text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600 {
  color: #a9b4d6 !important;
}

/* Borders ---------------------------------------------------- */
.border-primary-dark    { border-color: #0b0d10 !important; }
.border-primary-main    { border-color: #a9b4d6 !important; }
.border-primary-active  { border-color: #a9b4d6 !important; }
.border-primary-light   { border-color: #c8cee4 !important; }
.border-secondary-dark  { border-color: #2a2f37 !important; }
.border-secondary-main  { border-color: #2a2f37 !important; }
.border-secondary-light { border-color: #3a414b !important; }
.border-customblue-10   { border-color: #2a2f37 !important; }
.border-common-dark     { border-color: #2a2f37 !important; }
.border-common-bright   { border-color: #f4f6f8 !important; }
.border-inputfield-main { border-color: #3a414b !important; }

/* Hover states OHIF uses ------------------------------------ */
.hover\:bg-primary-light:hover  { background-color: #c8cee4 !important; color: #0b0d10 !important; }
.hover\:bg-primary-main:hover   { background-color: #a9b4d6 !important; color: #0b0d10 !important; }
.hover\:bg-primary-active:hover { background-color: #a9b4d6 !important; color: #0b0d10 !important; }
.hover\:text-primary-light:hover { color: #c8cee4 !important; }
.hover\:text-primary-light:hover * { color: #c8cee4 !important; fill: #c8cee4 !important; }

/* ============================================================
 * Layer 3: brand swap + footer
 * ============================================================ */

/* OHIF's rendered wordmark is an inline SVG with the distinctive
 * viewBox "0 0 138 28" (confirmed via runtime DOM diagnostic --
 * the ohif-logo-color-darkbg id in the bundle is an unused asset
 * and never appears in the live DOM).
 *
 * Pure-CSS swap with no React-fighting JS:
 *   - paint our lockup as a background-image on the host <svg>,
 *     sized to its 138x28 box,
 *   - hide the OHIF vector paths inside it.
 * The SVG keeps its layout box so the header doesn't reflow. */
svg[viewBox="0 0 138 28"] {
  background-image: url('/eve_lockup_health.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
svg[viewBox="0 0 138 28"] > g { visibility: hidden !important; }

/* OSS attribution footer (DESIGN.md sec.12a) ---------------- */
.rhtp-oss-credits {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 5;
  background: #0b0d10;
  color: #6b7480;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  line-height: 16px;
  padding: 6px 16px;
  text-align: center;
  border-top: 1px solid #2a2f37;
}
.rhtp-oss-credits a {
  color: #a8b0bb;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rhtp-oss-credits a:hover {
  color: #f4f6f8;
  border-bottom-color: #2a2f37;
}

#root { padding-bottom: 28px; }