/* ============================================================================
   Ram Realty Advisors — Design System tokens & primitives
   Source of truth: RAM_DESIGN_SYSTEM.md. Navy is the personality, red is the
   punctuation. Hairlines over shadows, sentence case over caps, exact numbers.
   ============================================================================ */

:root {
  /* ---- Core brand ---- */
  --ram-red: #E31837;
  --midnight-navy: #0F1B2D;
  --true-navy: #1C3557;

  /* ---- Heritage accents (charts / sector tags only — never UI primitives) ---- */
  --heritage-navy: #24364D;
  --mineral-slate: #5E6C79;
  --grove-olive: #727B61;
  --deep-teal-gray: #44666A;
  --sandstone: #BFAE96;
  --oxide-burgundy: #7B3743;

  /* ---- Neutrals ---- */
  --white: #F8F8F6;          /* warm off-white — never #FFF */
  --cool-fog: #E8EBEF;
  --steel-gray: #A7B0BA;
  --ink-slate: #4F5B68;

  /* ---- Semantic foreground ---- */
  --fg-1: #0F1B2D;           /* primary copy on light */
  --fg-2: #4F5B68;           /* secondary copy */
  --fg-3: #A7B0BA;           /* tertiary, captions */
  --fg-on-dark: #F8F8F6;
  --fg-on-dark-2: #C9D2DD;
  --fg-accent: #E31837;

  /* ---- Semantic background ---- */
  --bg-page: #F8F8F6;
  --bg-page-alt: #F1F2EE;
  --bg-surface: #FFFFFF;
  --bg-dark: #0F1B2D;
  --bg-dark-2: #1C3557;
  --bg-dark-3: #24364D;

  /* ---- Lines ---- */
  --line: #E8EBEF;
  --line-strong: #D4D9DF;
  --line-on-dark: rgba(255, 255, 255, 0.12);

  /* ---- Type ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-body: 15px; --fs-md: 17px;
  --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 44px;
  --fs-4xl: 60px; --fs-5xl: 84px;

  --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --ls-display: -0.02em; --ls-eyebrow: 0.18em; --ls-label: 0.08em; --ls-body: 0;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;
  --s-11: 120px; --s-12: 160px;

  /* ---- Radii (institutional restraint — no blob cards) ---- */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;

  /* ---- Shadows (understated, navy cast — never neutral gray) ---- */
  --shadow-1: 0 1px 2px rgba(15,27,45,0.04), 0 1px 1px rgba(15,27,45,0.03);
  --shadow-2: 0 4px 12px rgba(15,27,45,0.06), 0 1px 2px rgba(15,27,45,0.04);
  --shadow-3: 0 18px 40px rgba(15,27,45,0.10), 0 2px 6px rgba(15,27,45,0.05);

  /* ---- Motion (no bounce, no overshoot) ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
}

/* ---- Sector tag colors (heritage, never red/navy) ---- */
:root {
  --sector-multifamily: var(--deep-teal-gray);
  --sector-retail: var(--sandstone);
  --sector-mixeduse: var(--mineral-slate);
}

/* ============================================================================
   Primitives — reusable across every Ram OS screen
   ============================================================================ */

.ram-eyebrow {
  font: 500 var(--fs-xs)/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Buttons -------------------------------------------------------------------*/
.ram-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 20px;
  font: 500 var(--fs-sm)/1 var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  background: var(--midnight-navy);
  color: var(--white);
  border: 1px solid var(--midnight-navy);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ram-btn:hover  { background: #1a2840; }
.ram-btn:active { background: #0a1320; opacity: 0.92; }
.ram-btn--accent { background: var(--ram-red); border-color: var(--ram-red); }
.ram-btn--accent:hover { background: #ed2a47; }
.ram-btn--ghost {
  background: transparent; color: var(--fg-1); border-color: var(--line-strong);
}
.ram-btn--ghost:hover { background: var(--bg-page-alt); border-color: var(--fg-2); }

/* Card ----------------------------------------------------------------------*/
.ram-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast), box-shadow var(--dur-base);
}
.ram-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }

/* Sector tag ----------------------------------------------------------------*/
.ram-tag {
  display: inline-block;
  padding: 4px 10px;
  font: 500 11px/1.2 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  border-radius: var(--r-1);
  white-space: nowrap;
}
.ram-tag[data-sector="multifamily"],
.ram-tag[data-sector="Multi-Family"] { background: var(--deep-teal-gray); }
.ram-tag[data-sector="retail"],
.ram-tag[data-sector="Retail"]       { background: var(--sandstone); color: var(--midnight-navy); }
.ram-tag[data-sector="mixeduse"],
.ram-tag[data-sector="Mixed Use"]    { background: var(--mineral-slate); }
.ram-tag[data-sector="land"],
.ram-tag[data-sector="Land"]         { background: var(--grove-olive); }

/* Link ----------------------------------------------------------------------*/
.ram-link {
  color: var(--fg-1); text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.ram-link:hover { color: var(--ram-red); }

/* Focus — every interactive element ----------------------------------------*/
:focus-visible { outline: 2px solid var(--ram-red); outline-offset: 2px; }