/* AQR360 identity: Frontend/packages/ui/css/custom.css. This file is scoped
   to the separate design gallery; no live-app stylesheet is modified.
   The #0f5fb8 interaction tone is already used by the app's Asset Pro buttons.
   White text on identity blue #1587fa is only 3.57:1; use the darker interaction
   tone for small-text CTAs, keeping bright identity blue on accents instead. */
:root {
  --brand-primary: #1587fa;
  --brand-deep: #0900b2;
  --brand-action: #0f5fb8;
  --brand-charcoal: #2c2e33;
  --brand-text: #5c5e61;
  --brand-strong: #161e2d;
  --brand-soft: rgba(21, 135, 250, .10);
  --studio-bg: #f4f8ff;
  --studio-paper: #fff;
  --studio-text: var(--brand-charcoal);
  --studio-muted: var(--brand-text);
  --studio-line: #e4eaf3;
  --studio-blue: var(--brand-action);
  --studio-soft: var(--brand-soft);
  color: var(--studio-text);
  background: var(--studio-bg);
}
body { color: var(--studio-text); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: var(--brand-primary); }

/* Use the complete official image, not recreated text or a replacement mark. */
.studio-brand .brand-mark { display: none; }
.studio-brand { gap: 0; }
.studio-logo { display: block; width: 154px; height: auto; object-fit: contain; }
.studio-brand small { margin-top: 0; color: var(--brand-text); font-size: 10px; }
.aq-phone button.aq-brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.aq-logo { display: block; width: 132px; height: auto; object-fit: contain; }
.aq-phone button.aq-brand:hover { background: transparent; }

.canvas { background: radial-gradient(ellipse at 50% 40%, #fff 0, #f1f6ff 68%); }
.canvas-title h1, .inspector h2 { color: var(--brand-charcoal); }
.screen-link[aria-current=page], .segmented button[aria-pressed=true] { color: var(--brand-action); }
.screen-link[aria-current=page] { box-shadow: inset 3px 0 var(--brand-primary); }
.studio-search { background: #f6f9ff; border-color: var(--studio-line); }
.segmented { background: #eaf1fd; border-color: #dce6f5; }
.segmented button[aria-pressed=true] { box-shadow: 0 1px 5px #0900b21a; }
.inspector .native-note { background: var(--brand-soft); color: var(--brand-action); }
.toast { background: var(--brand-deep); }

.aq-phone:not(.dark) {
  --aq-bg: #f5f8fe;
  --aq-paper: #fff;
  --aq-text: var(--brand-strong);
  --aq-sub: var(--brand-text);
  --aq-line: #e4eaf3;
  --aq-blue: var(--brand-action);
  --aq-blue-soft: var(--brand-soft);
  --aq-blue-ink: var(--brand-action);
  --aq-on-blue: #fff;
  --aq-nav: #fffffff2;
}
.aq-phone.dark {
  --aq-bg: #101624;
  --aq-paper: #1b2435;
  --aq-text: #f1f4fc;
  --aq-sub: #b0bcd1;
  --aq-line: #303d54;
  --aq-blue: #81bffa;
  --aq-blue-soft: #193b60;
  --aq-blue-ink: #a8d5ff;
  --aq-on-blue: #101624;
  --aq-nav: #1b2435f5;
}
.aq-phone, .aq-phone.dark {
  --aq-hero: linear-gradient(135deg, var(--brand-deep), var(--brand-action));
  --aq-hero-text: #fff;
}
.aq-hero .aq-small { color: #f1f4fc; }
.aq-dot { background: var(--brand-primary); }
.aq-phone .aq-quick-icon { color: var(--aq-blue-ink); background: var(--aq-blue-soft); }
.aq-nav button[aria-current=page] { box-shadow: inset 0 2px var(--brand-primary); }
.aq-phone.design-asset .aq-nav button[aria-current=page] { background: var(--brand-action); color: #fff; }
.aq-phone.design-asset .aq-property-tile { background: var(--brand-deep); color: #fff; }
.aq-listing-photo .aq-badge { color: var(--brand-action); }
.aq-phone .aq-scan-preview { background: var(--brand-deep); }

@media(max-width:760px) {
  .studio-logo { width: 132px; }
  .studio-brand small { font-size: 9px; }
}