/*
  theme.css — "Housi premium" global theme layer.

  Hoists the design tokens from the landing (#l2-root) to global :root so
  every page inheriting base.html or base_dashboard.html picks up the same
  typography, palette and chrome as the new homepage.

  Discipline:
    - Only :root, body, and .housi-* selectors. No overrides of Tailwind
      utilities or bare element selectors (beyond body font/bg/color).
    - The landing (/) scopes its own tokens under #l2-root which wins by
      specificity; nothing here can leak into or break landing2.css.
    - If this file fails to load, pages gracefully fall back to their
      existing Tailwind classes — only the .housi-* components go
      unstyled.
*/

:root {
  --housi-bg:        #FAFAF7;
  --housi-surface:   #FFFFFF;
  --housi-ink:       #0B0D10;
  --housi-ink-soft:  #4B5563;
  --housi-ink-mute:  #9CA3AF;
  --housi-line:      #E5E7EB;
  --housi-line-soft: #F0EFEA;
  --housi-accent:    #2563EB;
  --housi-accent-2: #1D4ED8;
}

/* Inter everywhere, with the same OpenType stylistic sets landing2 uses.
   Font is loaded via <link rel="stylesheet"> in base.html / base_dashboard.html. */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  background: var(--housi-bg);
  color: var(--housi-ink);
}

/* ── Nav chrome ─────────────────────────────────────────────────── */

.housi-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--housi-accent-2);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.housi-logo:hover { color: var(--housi-accent); }

.housi-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--housi-ink-soft);
  text-decoration: none;
  transition: color .15s ease;
  white-space: nowrap;
}
.housi-nav-link:hover { color: var(--housi-ink); }

.housi-nav-link-accent {
  font-size: 14px;
  font-weight: 600;
  color: var(--housi-accent);
  text-decoration: none;
  transition: color .15s ease;
  white-space: nowrap;
}
.housi-nav-link-accent:hover { color: var(--housi-accent-2); }

.housi-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--housi-ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.housi-nav-cta:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}

/* Plan badge pills on the nav — soft, tokenised, with a colored dot prefix
   so the tier is still instantly readable without the loud bg-*-100 fill. */
.housi-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--housi-line);
  background: var(--housi-surface);
  color: var(--housi-ink-soft);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.housi-plan-pill:hover {
  border-color: var(--housi-ink-mute);
  color: var(--housi-ink);
}
.housi-plan-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--housi-ink-mute);
  flex-shrink: 0;
}
.housi-plan-pill--free::before    { background: #9CA3AF; }
.housi-plan-pill--investor::before { background: var(--housi-accent); }
.housi-plan-pill--profi::before    { background: #D97706; }
.housi-plan-pill--expired {
  color: #B91C1C;
  border-color: #FECACA;
}
.housi-plan-pill--expired::before { background: #EF4444; }

/* ── Eyebrow / kicker — small uppercase accent label ────────────── */

.housi-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--housi-ink-soft);
}

/* ── Card surface ───────────────────────────────────────────────── */

.housi-card {
  background: var(--housi-surface);
  border: 1px solid var(--housi-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ── Primary CTAs (non-nav) ─────────────────────────────────────── */

.housi-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--housi-ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.housi-cta:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.housi-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--housi-ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.housi-cta-ghost:hover {
  color: var(--housi-ink);
  border-bottom-color: var(--housi-ink-mute);
}

/* ── Tile value typography — echoes landing proof-row numbers ─── */

.housi-tile-value {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--housi-ink);
  font-size: 1.5rem;        /* ~24px mobile */
  line-height: 1.1;
}
@media (min-width: 640px) {
  .housi-tile-value { font-size: 1.75rem; }   /* ~28px desktop */
}