/* REALTEAM brand tokens. Source of truth: ablakehomes-homes/idx-demo/src/app/globals.css
   Updated to match the full design system, not just colors. */

:root {
  /* ─── Color palette ────────────────────────────────────────────────────── */
  --rt-navy: #1a2332;
  --rt-ink: #0d0d0d;
  --rt-cream: #f4ede0;
  --rt-champagne: #d4ad6a;
  --rt-champagne-light: #e8c98a;
  --rt-champagne-deep: #8a651e; /* WCAG AA on light bg */
  --rt-blue: #2a7086;
  --rt-teal: #1a5568;
  --rt-white: #ffffff;
  --rt-border: rgba(13, 13, 13, 0.08);
  --rt-border-strong: rgba(13, 13, 13, 0.16);
  --rt-muted: #5a5852;
  --rt-ok: #1f7a3a;
  --rt-err: #b3261e;
  --rt-warn: #8a651e;

  /* ─── Type system ──────────────────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-display-xl: clamp(3rem, 7vw, 6.5rem);
  --t-h1: clamp(2.5rem, 5.5vw, 5rem);
  --t-h2: clamp(2rem, 4.5vw, 3.5rem);
  --t-h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --t-h4: clamp(1.125rem, 1.6vw, 1.375rem);
  --t-body-lg: 1.0625rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-xs: 0.75rem;
  --t-cta: 0.6875rem;
  --t-eyebrow: 0.75rem;

  /* ─── Spacing scale ────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Container widths ─────────────────────────────────────────────────── */
  --container-7xl: 80rem; /* 1280 — primary */
  --container-6xl: 72rem; /* 1152 */
  --container-5xl: 64rem; /* 1024 — narrow content */
  --container-4xl: 56rem; /* 896  — form contexts */
  --container-prose: 44rem; /* 704 — reading width */

  /* ─── Radii ────────────────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ─── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(13, 13, 13, 0.04), 0 4px 14px rgba(13, 13, 13, 0.06);
  --shadow-lift: 0 2px 4px rgba(13, 13, 13, 0.06), 0 18px 40px -12px rgba(13, 13, 13, 0.22);
  --shadow-button: 0 8px 20px rgba(13, 13, 13, 0.12);
  --shadow-dramatic: 0 30px 60px -20px rgba(13, 13, 13, 0.35), 0 6px 16px rgba(13, 13, 13, 0.1);

  /* ─── Motion ───────────────────────────────────────────────────────────── */
  --ease-editorial: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-button: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-underline: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-magnetic: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 900ms;
  --dur-marquee: 60s;
}

/* ─── Base reset + body ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern", "liga", "calt";
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--rt-ink);
  background: var(--rt-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures contextual;
}
body {
  min-height: 100vh;
}

/* ─── Headings ──────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--rt-ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-feature-settings: "kern", "liga", "ss01";
}
h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: -0.005em;
}

p {
  margin: 0;
}

a {
  color: var(--rt-ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
a:hover {
  color: var(--rt-champagne-deep);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Selection color */
::selection {
  background: var(--rt-champagne);
  color: var(--rt-ink);
}

/* Scrollbar (subtle champagne accent on dark backgrounds) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--rt-champagne);
  border-radius: var(--radius-pill);
  opacity: 0.6;
}

/* ─── Editorial type accents ────────────────────────────────────────────── */

/* Italic Fraunces with WONK axis for editorial emphasis inside headlines */
.font-display-italic,
em.editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "WONK" 1, "SOFT" 50;
}

/* Display XL for major hero headlines */
.font-display-xl {
  font-size: var(--t-display-xl);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* Tabular numerals for stats / counters */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── Eyebrow label (the signature pattern) ─────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rt-champagne-deep);
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--rt-champagne-deep);
  display: inline-block;
}
.eyebrow--no-rule::before {
  display: none;
}
/* Auto-demote champagne to champagne-deep on light backgrounds for WCAG AA */
.bg-cream .eyebrow,
.bg-white .eyebrow {
  color: var(--rt-champagne-deep);
}
/* Light champagne on dark backgrounds */
.bg-dark .eyebrow,
.bg-navy .eyebrow,
.bg-ink .eyebrow {
  color: var(--rt-champagne);
}
.bg-dark .eyebrow::before,
.bg-navy .eyebrow::before,
.bg-ink .eyebrow::before {
  background: var(--rt-champagne);
}

/* ─── Reduced motion respect ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── View Transitions API (cross-fade page nav) ────────────────────────── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: vt-fade-out 280ms var(--ease-editorial) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 480ms 80ms var(--ease-editorial) both;
}
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}