/* Meriton / Spark brand overlay for demo1 — palette sampled from meriton.com:
   orange #FF5100, charcoal #4D4D4F, near-black #1E1E1E, mist #E5EDF1, IBM Plex Sans. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --paper: #F4F7F8; --paper-2: #E5EDF1; --card: #FFFFFF;
  --ink: #1E1E1E; --ink-2: #4D4D4F; --muted: #6E7073; --dark: #1E1E1E;
  --line: #DCE3E7; --line-2: #E8EEF1;
  --navy: #1E1E1E; --navy-hover: #3A3A3C; --navy-soft: #EEF2F4;
  --gold: #FF5100; --gold-hover: #E54900; --gold-soft: #FFE6D9; --gold-deep: #C43E00; --gold-logo: #FF5100;
  --wave-gold: #FFC4A6; --wave-blue: #C9D8E0;
  --st-gold: #E07A1F; --st-gold-bg: #FDEBDD; --st-gold-fg: #8A3F06;
  --st-blue: #4C7A93; --st-blue-bg: #E3EDF2; --st-blue-fg: #2E5A72;
}
body { font-family: 'IBM Plex Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* Orange fills take white text, as on meriton.com buttons */
.cta, .btn-gold, .ws-menu .mini, .ni .cnt.gold, .sub .cnt.gold, .avatar, .pill.mustard,
.tc-steps .on b, .wiz-steps .on b, .calcell.today .caldate { color: #fff; }
.cta, .btn-gold { border-radius: 4px; }
.cta:hover, .btn-gold:hover { background: var(--gold-hover); }

/* Hard-coded warm tints from the PAL palette */
.welcome:not(.hero) {
  --wl-blue: #4D4D4F; --wl-gold: #FF5100;
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(255, 81, 0, .14), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(77, 77, 79, .08), transparent 60%),
    var(--paper) !important;
}
.wl-net line { stroke: #B9C6CD; }
.appcard:hover, .role-admin.on, .search:focus-within { box-shadow: 0 0 0 3px rgba(255, 81, 0, .18); }
.kpi.on { box-shadow: 0 0 0 3px rgba(255, 81, 0, .22), var(--shadow); }
button.pill.navy:hover, .btn-2.primary:hover:not(:disabled), .btn-dark:hover:not(:disabled) { background: #3A3A3C; }
.notice.warn, .ops-stat.gold, .ops-qbr { border-color: #F8C9A8; }
table.tc-grid td.today { background: #FFF5EF; }
.field.ai-verify input, .field.ai-verify select { background: #FFF5EF; }

/* Inline-SVG art drawn in PAL gold/navy */
svg [stroke="#DFA21A"], svg [stroke="#B8862D"] { stroke: #FF5100; }
svg [fill="#DFA21A"], svg [fill="#B8862D"] { fill: #FF5100; }
svg [fill="#0E2240"] { fill: #1E1E1E; }
.waves path:nth-child(1) { stroke: #FFC4A6; }
.waves path:nth-child(2), .waves path:nth-child(3) { stroke: #C9D8E0; }

/* Logo swap: draw the Spark artwork as the background of the existing inline SVGs (no DOM changes) */
svg[aria-label="MeritonOS"] > *, svg.logo-mark > * { display: none; }
svg[aria-label="MeritonOS"] { background: url('/brand/meriton-logo.png') left center / contain no-repeat; width: 186px; }
.brand svg.logo-full { width: 201px; }
svg.logo-mark { background: url('/brand/meriton-mark.png') center / contain no-repeat; }
/* Dashboard hero: charcoal title and rule, Spark-orange ring without the PAL mark */
.hero.welcome h1 { color: var(--ink); }
.hero.welcome { border-bottom-color: #1E1E1E; }
.hero-rings path[transform], .hero-rings rect { display: none; }