/* ============================================================
   ResiApp — Brand layer
   Self-hosted Sora display font + the official "R" liquid-glass mark.
   Loaded app-wide via layouts/app_base.html, AFTER the design system
   so the brand tokens below can alias onto the existing --da-* palette.
   ============================================================ */

/* ---------- Self-hosted Sora (display / brand) ----------
   Relative path: this file lives in static/css/, fonts in static/fonts/. */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/Sora-SemiBold.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/Sora-ExtraBold.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* This file intentionally defines NO :root tokens. Brand colors and fonts
   (--blue, --blue-2, --font-display, etc.) come from the host page's own
   design system — resiapp_design_system.css on app pages, landing.css on the
   public landing — so brand.css is safe to load in any context. */

/* ---------- Logo lockup (live CSS — crisp at any size, theme-aware) ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }

/* The glass tile. Size everything from one var: --s on .resi-mark. */
.resi-mark {
  --s: 34px;
  position: relative;
  width: var(--s); height: var(--s);
  display: inline-grid; place-items: center;
  border-radius: 24%;            /* iOS-style squircle */
  overflow: hidden;
  background: linear-gradient(135deg, #27538f 0%, #142f55 55%, #0d2138 100%);
  border: 1px solid rgba(147, 195, 255, 0.40);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}
.resi-mark::before {            /* top-left specular highlight */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(65% 65% at 30% 16%, rgba(255, 255, 255, 0.34), transparent 60%);
}
.resi-mark::after {             /* glossy top sheen band */
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
}
.resi-mark > span {             /* the sky-gradient Sora "R" */
  position: relative; z-index: 2;
  font-family: 'Sora', sans-serif; font-weight: 800; line-height: 1;
  font-size: calc(var(--s) * 0.60); transform: translateY(5%);
  background: linear-gradient(135deg, #f4f8fe 0%, #aacdf7 48%, #3b82f6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.resi-wordmark {
  font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: 0.04em; line-height: 1;
  font-size: 18px; white-space: nowrap;
  background: linear-gradient(180deg, #eef3fa, #9fc2f4 55%, #3b82f6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.resi-wordmark .app { font-weight: 500; }

/* On a LIGHT background, swap the glass tile for the solid royal variant
   and the wordmark to solid navy (the glass goes muddy on light). */
.brand--on-light .resi-mark {
  background: linear-gradient(135deg, #1f4a86, #0F2A52 72%);
  border-color: rgba(147, 195, 255, 0.22);
}
.brand--on-light .resi-wordmark {
  background: none; -webkit-text-fill-color: #0F2A52; color: #0F2A52;
}