/* =============================================================
   Eaton Residences — Foundations
   Colors, type, spacing tokens for a private investor portal.
   Premium minimal: ivory + obsidian + heritage gold.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color: Brand ---------- */
  --er-gold:        #b8963e;   /* heritage gold, primary accent */
  --er-gold-deep:   #8c6f25;   /* hover / pressed */
  --er-gold-soft:   #d4b87a;   /* tints, dividers */
  --er-gold-tint:   #f5edd6;   /* backgrounds, hover wash */

  /* ---------- Color: Neutral (light) ---------- */
  --er-ivory:       #fafaf7;   /* primary surface */
  --er-bone:        #f1efe8;   /* card / muted surface */
  --er-stone:       #e6e2d6;   /* hairlines, dividers */
  --er-ash:         #b8b3a4;   /* tertiary text, disabled */
  --er-graphite:    #6b665a;   /* secondary text */
  --er-obsidian:    #1a1815;   /* headlines, primary text */
  --er-onyx:        #0c0b09;   /* deep dark surfaces */

  /* ---------- Color: Semantic ---------- */
  --er-bg:          var(--er-ivory);
  --er-bg-muted:    var(--er-bone);
  --er-bg-dark:     var(--er-obsidian);
  --er-fg:          var(--er-obsidian);
  --er-fg-muted:    var(--er-graphite);
  --er-fg-soft:     var(--er-ash);
  --er-fg-inverse:  var(--er-ivory);
  --er-accent:      var(--er-gold);
  --er-accent-hov:  var(--er-gold-deep);
  --er-rule:        var(--er-stone);
  --er-rule-strong: rgba(26, 24, 21, 0.16);

  /* Status (used sparingly — investor data only) */
  --er-positive:    #4f7a4a;
  --er-negative:    #a14a3c;
  --er-info:        #4a6a8c;

  /* ---------- Type: Families ---------- */
  --font-display:   "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic:    "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif;
  --font-mono:      "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- Type: Scale (display) ---------- */
  --fs-d1: clamp(3.25rem, 6vw, 5.5rem);   /* 52–88px hero */
  --fs-d2: clamp(2.5rem, 4.5vw, 4rem);    /* 40–64px section */
  --fs-d3: clamp(2rem, 3.2vw, 2.75rem);   /* 32–44px sub-section */
  --fs-d4: 1.75rem;                        /* 28px */
  --fs-h1: 1.5rem;                         /* 24px */
  --fs-h2: 1.25rem;                        /* 20px */

  /* ---------- Type: Scale (body) ---------- */
  --fs-lg: 1.125rem;     /* 18px lede */
  --fs-md: 1rem;         /* 16px body */
  --fs-sm: 0.875rem;     /* 14px caption */
  --fs-xs: 0.75rem;      /* 12px eyebrow / overline */
  --fs-xxs: 0.6875rem;   /* 11px micro */

  /* ---------- Type: Weights / Tracking ---------- */
  --fw-display:  500;
  --fw-display-bold: 600;
  --fw-body-light: 300;
  --fw-body: 400;
  --fw-body-medium: 500;
  --fw-body-semi: 600;

  --tracking-display: -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.22em;     /* uppercase eyebrows */
  --tracking-button:  0.08em;
  --tracking-tight:   -0.02em;

  --leading-display:  1.08;
  --leading-heading:  1.2;
  --leading-body:     1.6;
  --leading-tight:    1.4;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Section rhythm */
  --section-y:      clamp(64px, 9vw, 128px);
  --section-y-lg:   clamp(96px, 12vw, 160px);
  --section-x:      clamp(24px, 6vw, 96px);

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hair:     1px solid var(--er-rule);
  --border-medium:   1px solid var(--er-rule-strong);
  --border-gold:     1px solid var(--er-gold);
  --border-gold-soft: 1px solid var(--er-gold-soft);

  /* ---------- Shadows (restrained, paper-like) ---------- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(26, 24, 21, 0.04), 0 1px 1px rgba(26, 24, 21, 0.03);
  --shadow-md:  0 4px 12px rgba(26, 24, 21, 0.06), 0 1px 3px rgba(26, 24, 21, 0.04);
  --shadow-lg:  0 16px 40px rgba(26, 24, 21, 0.08), 0 4px 12px rgba(26, 24, 21, 0.04);
  --shadow-xl:  0 32px 80px rgba(26, 24, 21, 0.12), 0 8px 24px rgba(26, 24, 21, 0.06);
  /* Inset, used on dark imagery for label readability */
  --shadow-inset-image: inset 0 -120px 120px -40px rgba(12, 11, 9, 0.55);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:  cubic-bezier(0.2, 0.9, 0.1, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   560ms;
  --dur-reveal: 880ms;

  /* ---------- Layout ---------- */
  --max-content: 1280px;
  --max-text:    640px;
  --max-prose:   720px;
}

/* =============================================================
   Semantic styles
   Drop these classes anywhere; or use @extend-style tokens above.
   ============================================================= */

/* ---- Display headings (Playfair) ---- */
.er-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-d1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--er-fg);
}
.er-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-d2);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--er-fg);
}
.er-display-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-d3);
  line-height: var(--leading-heading);
  color: var(--er-fg);
}
.er-display-4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-d4);
  line-height: var(--leading-heading);
  color: var(--er-fg);
}

/* ---- Body & UI ---- */
.er-lede {
  font-family: var(--font-body);
  font-weight: var(--fw-body-light);
  font-size: var(--fs-lg);
  line-height: var(--leading-body);
  color: var(--er-fg-muted);
}
.er-body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-md);
  line-height: var(--leading-body);
  color: var(--er-fg);
}
.er-body-muted {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-md);
  line-height: var(--leading-body);
  color: var(--er-fg-muted);
}
.er-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-sm);
  line-height: var(--leading-tight);
  color: var(--er-fg-muted);
}

/* ---- Eyebrow / overline (uppercase label above headlines) ---- */
.er-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-body-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--er-accent);
}
.er-eyebrow-muted {
  font-family: var(--font-body);
  font-weight: var(--fw-body-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--er-fg-muted);
}

/* ---- Numeric / data display ---- */
.er-numeric {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--tracking-tight);
}

/* ---- Button label ---- */
.er-button-label {
  font-family: var(--font-body);
  font-weight: var(--fw-body-medium);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
}

/* ---- Inline rules ---- */
.er-rule           { border-top: var(--border-hair); }
.er-rule-gold      { border-top: var(--border-gold); }
.er-rule-vertical  { border-left: var(--border-hair); }

/* ---- RTL support ---- */
[dir="rtl"] {
  font-family: var(--font-arabic);
}
[dir="rtl"] .er-display-1,
[dir="rtl"] .er-display-2,
[dir="rtl"] .er-display-3,
[dir="rtl"] .er-display-4 {
  font-family: var(--font-arabic);
  font-weight: 600;
  letter-spacing: 0;
}