/* =============================================================
   Rhythmic Property Relocation — Brand Tokens
   Lean, brand-standard system:
     · 2 brand colours (primary + secondary), 1 accent
     · 5 neutrals, 4 semantic
     · 2 system fonts (1 serif, 1 sans) + 1 wordmark-only display
     · Theme switch via .theme-green for the supported-living
       expression (forest + crimson replace navy + silver).
   ============================================================= */

/* ---------- FONTS ---------------------------------------------
   Industry brand standards converge on TWO system faces.
   We use a third — Cinzel — only for recreating the wordmark
   itself; it is NOT a body or UI font and should not appear in
   running text.
   ⚠ Substitutes — flag if licensed faces exist.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* =========================================================
     BRAND COLOURS — kept deliberately small.
     ========================================================= */

  /* Primary — navy. The brand colour. */
  --brand:         #082848;
  --brand-deep:    #061E36;   /* hover / pressed / footer floor */
  --brand-soft:    #EEF2F7;   /* tinted background, alerts */

  /* Secondary — silver wave. */
  --secondary:     #8898A8;
  --secondary-soft:#E2E5EA;

  /* Accent — gold. Use for ribbon callouts only. */
  --accent:        #C9A04E;
  --accent-bright: #E7BF72;

  /* =========================================================
     NEUTRALS — 5 steps + paper + white.
     ========================================================= */
  --ink:        #0B1726;   /* body text */
  --ink-soft:   #2B384A;   /* secondary text */
  --mute:       #5A6878;   /* tertiary / captions */
  --line:       #DEE3EA;   /* borders */
  --line-soft:  #ECEFF3;   /* dividers */
  --paper:      #FBFAF7;   /* primary surface — warm off-white */
  --paper-2:    #F4F2EC;   /* secondary surface — card / muted */
  --white:      #FFFFFF;   /* tables, inputs */

  /* =========================================================
     SEMANTIC — the standard four.
     ========================================================= */
  --success: #1F5826;
  --warning: #B58A3D;
  --danger:  #B80808;
  --info:    #1F4D7E;

  /* =========================================================
     TYPOGRAPHY — two families do the work.
     ========================================================= */
  --font-serif: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mark:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;   /* wordmark, weight 700 */
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 8 steps, modular. */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-lg:   18px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  48px;
  --t-4xl:  64px;

  /* =========================================================
     SPACING — 4px base, 8 steps.
     ========================================================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* =========================================================
     RADII — sharp-ish, document-grade.
     ========================================================= */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* =========================================================
     ELEVATION — 3 tiers, restrained.
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(8,40,72,0.06), 0 1px 1px rgba(8,40,72,0.04);
  --shadow-2: 0 4px 10px rgba(8,40,72,0.08), 0 2px 4px rgba(8,40,72,0.04);
  --shadow-3: 0 12px 28px rgba(8,40,72,0.14), 0 6px 10px rgba(8,40,72,0.06);

  /* =========================================================
     MOTION — short, ease-out. Two durations.
     ========================================================= */
  --dur:        180ms;
  --dur-slow:   360ms;
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =============================================================
   ALTERNATE EXPRESSION — supported-living / residents.
   Forest + crimson replace navy + silver. Everything else holds.
   ============================================================= */
.theme-green {
  --brand:         #184818;
  --brand-deep:    #0E2E13;
  --brand-soft:    #DCEADE;
  --secondary:     #C80818;
  --secondary-soft:#FBEAEC;
}

/* =============================================================
   LEGACY ALIASES — kept so existing files keep rendering while
   you migrate. Treat as private; prefer the slim names above.
   ============================================================= */
:root {
  --rpr-navy-900:#061E36; --rpr-navy-800:#082848; --rpr-navy-700:#0D2F52;
  --rpr-navy-600:#143C66; --rpr-navy-500:#1F4D7E; --rpr-navy-400:#3B6A99;
  --rpr-navy-300:#6B8DB5; --rpr-navy-200:#A4BACF; --rpr-navy-100:#D6DFE9;
  --rpr-navy-050:#EEF2F7;
  --rpr-silver-700:#5C6B7B; --rpr-silver-500:#8898A8; --rpr-silver-300:#B6C0CB; --rpr-silver-100:#E2E5EA;
  --rpr-forest-900:#0E2E13; --rpr-forest-800:#184818; --rpr-forest-700:#1F5826;
  --rpr-forest-600:#2A6E33; --rpr-forest-500:#3A8847; --rpr-forest-300:#A2C7AB; --rpr-forest-100:#DCEADE;
  --rpr-crimson-700:#8E0612; --rpr-crimson-600:#B80808; --rpr-crimson-500:#C80818; --rpr-crimson-300:#E78088;
  --rpr-gold-600:#B58A3D; --rpr-gold-500:#C9A04E; --rpr-gold-400:#E7BF72; --rpr-gold-200:#F2DEAE;
  --rpr-ink:#0B1726; --rpr-ink-soft:#2B384A; --rpr-mute:#5A6878;
  --rpr-line:#DEE3EA; --rpr-line-soft:#ECEFF3;
  --rpr-paper:#FBFAF7; --rpr-paper-2:#F4F2EC; --rpr-white:#FFFFFF;
  --brand-primary: var(--brand); --brand-primary-deep: var(--brand-deep);
  --brand-secondary: var(--secondary); --brand-accent: var(--accent);
  --fg-1: var(--ink); --fg-2: var(--ink-soft); --fg-3: var(--mute);
  --bg-1: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--brand-soft);
  --bg-dark: var(--brand); --bg-darker: var(--brand-deep);
  --border-1: var(--line); --border-2: var(--line-soft);
  --font-display: var(--font-mark);
  --font-body: var(--font-sans);
  --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-15: 0.9375rem;
  --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-24: 1.5rem; --t-28: 1.75rem;
  --t-32: 2rem; --t-40: 2.5rem; --t-48: 3rem; --t-56: 3.5rem; --t-64: 4rem; --t-80: 5rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:22px; --radius-pill:999px;
  --shadow-4: 0 24px 56px rgba(8,40,72,0.20), 0 10px 18px rgba(8,40,72,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(8,40,72,0.08);
  --ease-out: var(--ease); --ease-in-out: cubic-bezier(0.6, 0.1, 0.2, 0.95);
  --dur-fast:140ms; --dur-base:var(--dur);
}

/* =============================================================
   SEMANTIC ELEMENTS
   ============================================================= */

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — wordmark face, used only for ALL-CAPS brand moments.
   The Cinzel face exists so we can recreate the wordmark in HTML
   when the PNG isn't usable. Do not set body text in this. */
.wordmark {
  font-family: var(--font-mark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-3xl);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--brand);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.15;
  color: var(--brand);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--brand);
  margin: 0 0 var(--s-2);
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

/* Eyebrow — short, tracked-out sentinel above a heading */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary);
}

p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink);
}

small, .caption {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--mute);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--brand-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  color: var(--brand);
}

a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--brand-deep); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}