/* ============================================================================
   Quinta da Baroneza — Brand overlay for MDMesh
   Re-skins the MDMesh console with the QB visual identity by overriding the
   app's theme CSS variables. Loaded AFTER the app bundle, so these win.
   Brand foundations sourced from the QB Design System (theme.ts verbatim).
   ----------------------------------------------------------------------------
   NOTE: This is a brand reskin of a vendored SPA. It maps QB color/type/shadow
   tokens onto MDMesh's existing theme variables. Re-apply after each upgrade.
   ============================================================================ */

/* ---- QB webfonts (served from /brand/fonts, mounted by docker-compose.brand.yml) ---- */
@font-face {
  font-family: "Apparat";
  src: url("/brand/fonts/apparat-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apparat";
  src: url("/brand/fonts/apparat-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mansory";
  src: url("/brand/fonts/mansory-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mansory";
  src: url("/brand/fonts/mansory-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- QB brand palette (reference) ----
   Verde QB:   500 #004518 · 600 #003713 · 400 #336A46 · 100 #CCDAD1
   Neutros:    100 #FCFBF9 · 200 #F9F6F3 · 300 #F6F2EC · 400 #F3EDE6
               500 #F0E9E0 · 600 #C0BAB3 · 700 #908C86 · 800 #605D5A · 900 #302F2D
   Status:     success #458C64 · alert #EA821B (#FBE6D1) · error #FF383C / #992224
*/

/* ===========================  LIGHT  =========================== */
:root {
  /* Fonts — Apparat for UI/body, Mansory (display serif) for headings/condensed slot */
  --font-sans: "Apparat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cond: "Mansory", "Playfair Display", Georgia, serif;
  /* --font-mono left as the app's IBM Plex Mono (code/IDs stay monospace) */

  /* Surfaces — warm creams, never pure white for the page */
  --app:        #F9F6F3; /* neutral-200 page background */
  --surface:    #FFFFFF; /* cards */
  --surface-2:  #F3EDE6; /* neutral-400 raised/sunken fill */
  --panel:      #FFFFFF;
  --panel-2:    #F3EDE6;

  /* Lines / borders — mostly borderless; hairlines in warm neutrals */
  --border:        #F0E9E0; /* neutral-500 */
  --border-hover:  #C0BAB3; /* neutral-600 */
  --line:          #F0E9E0;
  --line-soft:     #F6F2EC; /* neutral-300 */
  --hairline:      #F6F2EC;

  /* Emphasis / primary-action color (--ink drives the filled primary button:
     .btn-primary { background: var(--ink) }). This is the signature QB move. */
  --ink:        #004518; /* Verde QB — primary buttons / strong emphasis */
  --ink-hover:  #003713; /* green-600 pressed */
  /* Text ladder (body text stays warm charcoal — uses --text, not --ink) */
  --text:       #302F2D;
  --text-2:     #605D5A; /* neutral-800 secondary */
  --secondary:  #605D5A;
  --muted:      #908C86; /* neutral-700 */
  --faint:      #C0BAB3; /* neutral-600 */
  --on-ink:     #FFFFFF;

  /* Accent / primary action = Verde QB (the signature move) */
  --signal:      #004518; /* green-500 primary buttons / active nav */
  --signal-ink:  #FFFFFF; /* text on green */
  --signal-dim:  #CCDAD1; /* green-100 subtle active fill */

  /* Status */
  --online:  #458C64; /* success */
  --ok:      #458C64;
  --offline: #C0BAB3;
  --idle:    #C0BAB3;
  --warn:    #EA821B; /* alert orange */
  --alert:   #EA821B;
  --danger:  #FF383C; /* error */
  --danger-soft-bg:            #FBE6D1;
  --danger-soft-border:        #F3D4C4;
  --danger-soft-border-hover:  #E9BDA8;

  /* Focus ring + scrims — green-tinted */
  --ring:      #00451824;
  --backdrop:  #302F2D73; /* warm charcoal scrim ~0.45 */

  /* Shadows — soft, warm, charcoal-tinted (QB) */
  --shadow-card: 0 2px 12px rgba(48, 47, 45, 0.08);
  --shadow-pop:  0 16px 40px rgba(0, 41, 14, 0.22);

  /* Radii — QB scale happens to match MDMesh; set explicitly for safety */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --radius-chip: 999px;
}

/* ===========================  DARK  ===========================
   The QB Design System is light-only; this is a faithful dark adaptation
   that keeps the warm-green character (deep green-charcoal surfaces, a
   brighter Verde QB accent for contrast on dark). */
[data-theme="dark"] {
  --font-sans: "Apparat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cond: "Mansory", "Playfair Display", Georgia, serif;

  --app:        #12140F;
  --surface:    #1A1D16;
  --surface-2:  #22261D;
  --panel:      #1A1D16;
  --panel-2:    #22261D;

  --border:        #2E3326;
  --border-hover:  #3C4231;
  --line:          #2E3326;
  --line-soft:     #23271D;
  --hairline:      #1D2017;

  --ink:        #F4F1EA; /* warm light text */
  --ink-hover:  #DED9CF;
  --text:       #ECE8E0;
  --text-2:     #C7C1B6;
  --secondary:  #ACA69B;
  --muted:      #908C86;
  --faint:      #6E6A63;
  --on-ink:     #12140F;

  --signal:      #7FB08C; /* brighter Verde QB for dark surfaces */
  --signal-ink:  #0B2512; /* deep green text on accent */
  --signal-dim:  #223A29;

  --online:  #5AA87B;
  --ok:      #5AA87B;
  --offline: #4A5244;
  --idle:    #4A5244;
  --warn:    #E0973A;
  --alert:   #E0973A;
  --danger:  #E57373;
  --danger-soft-bg:            #2A1B18;
  --danger-soft-border:        #45302A;
  --danger-soft-border-hover:  #5A3A30;

  --ring:      #7FB08C33;
  --backdrop:  #0A0C08CC;

  --shadow-card: 0 8px 22px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop:  0 14px 34px -14px rgba(0, 0, 0, 0.7);
}

/* Headings pick up the Mansory display serif explicitly (sentence case kept by
   the app; QB uses Mansory for titles & section headers). */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-cond);
  letter-spacing: -0.01em;
}

/* ---- Brand wordmark → Quinta da Baroneza logo ----
   The app renders its wordmark as <span class="wordmark">…MDMesh…</span> in the
   login card and app chrome. We hide the text and paint the QB script logo via a
   CSS mask, so it recolors per theme (Verde QB in light, light green in dark) and
   always keeps good contrast — from a single transparent PNG. Aspect ~5.3:1. */
.wordmark {
  display: inline-block !important;
  height: 1.9em;
  width: 10em;            /* ~5.3:1 of the height, mask uses `contain` so no distortion */
  color: transparent !important;
  -webkit-mask: url("/brand/logo.png") left center / contain no-repeat;
          mask: url("/brand/logo.png") left center / contain no-repeat;
  background-color: var(--signal); /* Verde QB (light) / lighter green (dark) */
  vertical-align: middle;
}
.wordmark > * { display: none !important; }