/* ============================================================================
   A-EZ Out Bail Bonds — Brand theme layer
   ============================================================================

   ---- @font-face seam for Playfair Display ------------------------------
   To swap from the system serif fallback to a self-hosted Playfair Display,
   drop the font files (woff2 preferred) into:
       apps/ai/src/public/brand/aez/fonts/
   then uncomment the @font-face block below. No other change needed —
   --brand-display already lists 'Playfair Display' as the first family.

   Operator note: ship through your own static-asset path; do NOT hotlink
   fonts.googleapis.com (operator brief: "Self-host the font, don't pull
   from a third-party CDN").

   @font-face {
     font-family: 'Playfair Display';
     font-style: normal;
     font-weight: 400 800;
     font-display: swap;
     src: url('/brand/aez/fonts/PlayfairDisplay-VariableFont_wght.woff2')
            format('woff2-variations'),
          url('/brand/aez/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
   }
   ------------------------------------------------------------------------

   This file is loaded BEFORE styles.css. It does two things:

   1. Defines every brand-level CSS custom property at :root
      (--brand-primary, --brand-accent, --brand-navy, --brand-display, etc.)
      Per-tenant override (Phase B) injects its own :root block earlier in
      the cascade to win without rewriting this file.

   2. Re-maps the existing styles.css "legacy" tokens (--accent, --font-display)
      to consume the brand tokens. This is the magic that re-themes the
      whole app without touching the 8800-line stylesheet below it.

   No new layout. No new rules outside :root. Strict re-skin.
   ============================================================================ */

:root {
  /* === Brand identity (source of truth) =============================== */
  /* These come from apps/ai/src/public/brand/aez/brand.config.js. The
     two files stay in sync — when the JS config changes, mirror the
     hex / string values here so SSR rendering (Phase B) and the
     client both see the same theme. */

  /* Brand palette — sampled VERBATIM from the official A-EZ wordmark
     SVG (#ed1c24 red + #1b75bc blue) plus the operator spec navy.
     The raw sampled values are used for FILLS (the logo, button
     backgrounds, accent bars). Separate `*-text` variants are used
     in TEXT positions (links, active-nav, danger badge labels)
     because the brand red/blue at full saturation don't clear WCAG
     AA 4.5:1 against the dark substrate. */
  --brand-primary: #ed1c24;        /* logo glyph red (the brand) */
  --brand-primary-cta: #e81b23;    /* 2% darker — passes white@4.55:1 for .btn.primary bg */
  --brand-primary-hover: #c41820;
  --brand-primary-pressed: #a01419;
  --brand-primary-soft: rgba(237, 28, 36, 0.12);
  --brand-primary-soft-2: rgba(237, 28, 36, 0.20);
  /* Text-position red — same hue, 30% lighter so it clears AA on
     surface (5.35:1), bg (5.94:1), and navy (4.58:1). Use this for
     danger labels, error messages, anywhere brand red is rendered
     as foreground text. */
  --brand-primary-text: #f26066;

  --brand-accent: #1b75bc;         /* logo sub-mark blue (the brand) */
  --brand-accent-hover: #155e9a;
  --brand-accent-soft: rgba(27, 117, 188, 0.12);
  --brand-accent-soft-2: rgba(27, 117, 188, 0.22);
  /* Text-position blue — 24% lighter, clears AA on surface (5.31:1),
     bg (5.90:1), navy (4.55:1). Use for links + active-nav text. */
  --brand-accent-text: #5296cc;

  --brand-navy: #0D2B45;           /* page header + section beds */
  --brand-navy-deep: #091e30;

  /* Surface — kept dark (preserves layout, density, and the existing
     warm-neutral substrate). Phase B may add a `--brand-surface-mode:
     light` variant if a tenant wants a white skin. */
  --brand-surface: #1f1b16;
  --brand-surface-muted: #221d18;
  --brand-border: #2e2820;

  /* Typography — Playfair-style serif for headings, Inter for body.
     Until the operator drops a self-hosted Playfair Display .woff2
     into brand/aez/fonts/, the stack falls back to high-quality
     system serifs (Charter on macOS / Cambria on Windows / Georgia
     everywhere else). All have similar transitional/Didone proportions. */
  --brand-display: 'Playfair Display', 'Charter', 'Source Serif Pro',
                   Georgia, 'Times New Roman', serif;
  --brand-body: 'Inter Tight', -apple-system, BlinkMacSystemFont,
                'Segoe UI', sans-serif;

  /* Logo references — consumed by the .sidebar-brand markup as
     `background-image: var(--brand-logo-url)`. Real operator assets
     vendored at the paths below (wordmark.svg + icon.png, 270x270). */
  --brand-logo-url: url('/brand/aez/logo/wordmark.svg');
  --brand-icon-url: url('/brand/aez/logo/icon.png');
  --brand-company-name: 'A-EZ Out Bail Bonds';

  /* === Legacy-token remap ============================================ */
  /* These are read by the existing styles.css. By overriding them here
     with brand-driven values, the entire 8800-line stylesheet re-themes
     without a single edit below. */

  /* The primary "accent" was Wave 8's gold #d4a347. Becomes brand red. */
  --accent: var(--brand-primary);
  --accent-2: var(--brand-primary-hover);
  --accent-3: var(--brand-primary-pressed);
  --accent-soft: var(--brand-primary-soft);
  --accent-soft-2: var(--brand-primary-soft-2);

  /* Display + body fonts now point at brand families. */
  --font-display: var(--brand-display);
  --font-body: var(--brand-body);

  /* Info-flavored accents (links, active-tabs) take the brand blue.
     Note we point --info at the TEXT variant — most --info consumers
     in styles.css use it as `color:`, where AA 4.5:1 applies. The
     fill positions (.bar bgs, focus rings) reach for var(--brand-accent)
     directly via the rules at the bottom of this file. */
  --info: var(--brand-accent-text);
  --info-soft: var(--brand-accent-soft);

  /* Danger keeps its semantic meaning (destructive actions) and uses
     brand red. --danger lands in text positions (error labels, danger
     badges), so it maps to the text variant for AA. Fills that need
     the deep brand red reach for var(--brand-primary) directly. */
  --danger: var(--brand-primary-text);
  --danger-soft: var(--brand-primary-soft);
}

/* === Wave-8 dark substrate, retinted toward navy =====================
   The existing palette is warm-neutral brown. Pulling the bases a few
   degrees toward navy gives the whole UI a brand-aligned cool tilt
   without touching the structural rules.

   These overrides only retint the BASES — every surface defined as
   var(--bg) / var(--bg-2) / var(--surface) below in styles.css
   picks up the cooler navy-tinged shade automatically. */
:root {
  --bg: #0e1218;             /* near-black with navy undertone */
  --bg-2: #131922;
  --bg-3: #19202b;
  --surface: #161d28;        /* card / modal */
  --surface-2: #1e2632;
  --surface-3: #283143;      /* hover row, tooltip */

  --border: #2a3340;
  --border-2: #364152;
  --border-strong: #475368;

  --text: #e9eef5;           /* primary — cool parchment */
  --text-2: #b4becc;
  --text-3: #7a8597;
  --text-strong: #ffffff;
}

/* === Brand-driven heading rule =======================================
   Headings inherit the serif display. Wave 8 already wired
   font-family: var(--font-display) for h1/h2/h3 — by remapping
   --font-display above, every heading already gets the brand serif.
   The rule below tightens leading on display-size text so the serif
   doesn't read airy. */
h1, h2, h3, .modal h2, .page-title, .w2-page-head h1 {
  font-family: var(--brand-display);
  letter-spacing: -0.012em;
  line-height: 1.15;
}

/* === Brand-driven sidebar wordmark ===================================
   Replaces the Wave-8 ".brand-mark" gold-square + "A·EZ Command"
   text mark with the vendored SVG. The markup in index.html keeps
   its existing classes — only the visual treatment of .brand-mark
   and .brand-wordmark changes here. */
.sidebar-brand .brand-mark {
  /* The SVG icon takes the place of the gold square. */
  width: 28px;
  height: 28px;
  background: var(--brand-icon-url) center/contain no-repeat;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--brand-border);
  flex-shrink: 0;
}
.sidebar-brand .brand-wordmark {
  font-family: var(--brand-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--text-strong);
  line-height: 1.1;
}
.sidebar-brand .brand-sub {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
}

/* === Primary CTA color polish ========================================
   .btn.primary uses --brand-primary-cta (2% darker than the brand red)
   so the resting state clears AA 4.5:1 for white-on-red. Hover and
   active push darker still. Same rule covers the login form's
   submit button (it doesn't carry the .btn class — the styles.css
   .login-card button[type=submit] rule needs an override to fill
   with the brand red instead of rendering as an outlined button). */
.btn.primary,
.login-card button[type='submit'],
form#login-form button[type='submit'] {
  background: var(--brand-primary-cta);
  border-color: var(--brand-primary-cta);
  color: #ffffff;
}
.btn.primary:hover,
.login-card button[type='submit']:hover,
form#login-form button[type='submit']:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: #ffffff;
}
.btn.primary:active,
.login-card button[type='submit']:active,
form#login-form button[type='submit']:active {
  background: var(--brand-primary-pressed);
  border-color: var(--brand-primary-pressed);
}

/* === Active-nav / link accent ========================================
   Secondary brand color (blue) drives the sidebar active-state,
   tab underlines, and hyperlinks.
   - Color positions use the AA-passing --brand-accent-text variant.
   - Underline / bar FILL positions use the deep --brand-accent (the
     brand-faithful blue) — fills carry no AA requirement. */
a, .nav-item.active, .tab.active, .bb-tab.active {
  color: var(--brand-accent-text);
}
.nav-item.active::after, .tab.active::after, .bb-tab.active::after {
  background: var(--brand-accent);
}

/* === Login page brand panel =========================================
   The Wave-8 login uses a dark surface card — keep the structure,
   swap the accent stripe + button to brand. */
.login-card .login-stripe,
.auth-stripe {
  background: linear-gradient(90deg,
    var(--brand-primary) 0%,
    var(--brand-primary) 55%,
    var(--brand-accent) 55%,
    var(--brand-accent) 100%);
}

/* === Auth-gated boot splash ==========================================
   Covers the viewport with brand-navy + the A-EZ wordmark while
   app.js awaits /api/auth/me. Removed on successful auth so the
   shell can paint. On a 401 redirect, the splash stays up until
   the browser navigates to /login.html — so the authenticated
   shell never flashes. See app.js boot IIFE.

   `app-splash-hidden` triggers the fade-out (220ms) — long enough
   to feel polished, short enough not to block a logged-in user. */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 200ms ease;
}
#app-splash.app-splash-hidden {
  opacity: 0;
  pointer-events: none;
}
.app-splash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  /* Subtle padding so the wordmark + spinner don't crowd the navy.
     Centered via the flex parent. */
  padding: 32px 40px;
}
.app-splash-logo {
  width: clamp(180px, 28vw, 320px);
  height: auto;
  /* The wordmark SVG carries its own colors (#ed1c24 + #1b75bc) —
     no filter needed. A tiny drop shadow lifts it off the navy. */
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.25));
}
.app-splash-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Thin ring with the brand red as the rotating segment so the
     spinner reads as part of the brand identity. */
  border: 2.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--brand-primary);
  animation: app-splash-spin 0.8s linear infinite;
}
@keyframes app-splash-spin {
  to { transform: rotate(360deg); }
}

/* Hide the authenticated shell while the splash is up. The class
   sits on <body>; app.js removes it after a successful auth check. */
body.app-loading .app {
  visibility: hidden;
}

/* === Reduced-motion respects the brand transitions ================== */
@media (prefers-reduced-motion: reduce) {
  .app-splash-spinner { animation: none; }
  #app-splash { transition: none; }
}