/* ─────────────────────────────────────────────────────────────
   Home for You — Foundations
   Colors, type and core CSS variables
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600;700&family=Noto+Sans+Georgian:wght@300;400;500;600&display=swap');

:root {
  /* ────────────── BRAND COLOR PALETTE ────────────── */
  /* Primary — Deep Forest Green (foundation, dark surfaces, primary headlines on light) */
  --hfy-forest: #252D26;          /* Deep Forest Green — primary brand */
  --hfy-near-black: #1A1F1B;      /* Near Black — deepest surface */
  --hfy-dark-tint: #2C3530;       /* Dark Tint — secondary dark surface */
  --hfy-charcoal: #1C211D;        /* Hero / nav background (figma) */

  /* Secondary — Olive */
  --hfy-olive: #4C6F56;           /* Olive Drab — accents, primary CTA on dark */
  --hfy-olive-figma: #416348;     /* Slightly cooler variant used in figma buttons */
  --hfy-olive-10: rgba(76, 111, 86, 0.10);
  --hfy-olive-20: rgba(76, 111, 86, 0.20);
  --hfy-olive-30: rgba(76, 111, 86, 0.30);

  /* Background — Cream / Bone */
  --hfy-bone: #FDFBEE;            /* Cream / Bone — primary light bg, text on dark */
  --hfy-linen: #EBE3D0;           /* Linen — warm headline color on dark surfaces */
  --hfy-paper: #FBFCF6;           /* Off-white — subtle alt light surface */

  /* Neutrals + ink */
  --hfy-ink: #1C211D;             /* Body ink on light bg */
  --hfy-ink-70: rgba(28, 33, 29, 0.70);
  --hfy-ink-50: rgba(28, 33, 29, 0.50);
  --hfy-ink-30: rgba(28, 33, 29, 0.30);
  --hfy-ink-10: rgba(28, 33, 29, 0.10);

  /* Cream alphas (for use on dark) */
  --hfy-linen-90: rgba(235, 227, 208, 0.90);
  --hfy-linen-70: rgba(235, 227, 208, 0.70);
  --hfy-linen-60: rgba(235, 227, 208, 0.60);
  --hfy-linen-40: rgba(235, 227, 208, 0.40);
  --hfy-linen-30: rgba(235, 227, 208, 0.30);
  --hfy-linen-20: rgba(235, 227, 208, 0.20);
  --hfy-linen-10: rgba(235, 227, 208, 0.10);

  /* Semantic surfaces */
  --hfy-surface-dark: var(--hfy-charcoal);
  --hfy-surface-dark-2: var(--hfy-dark-tint);
  --hfy-surface-light: var(--hfy-bone);
  --hfy-surface-light-2: var(--hfy-paper);

  --hfy-fg-on-dark: var(--hfy-linen);
  --hfy-fg-on-dark-muted: var(--hfy-linen-60);
  --hfy-fg-on-light: var(--hfy-ink);
  --hfy-fg-on-light-muted: var(--hfy-ink-70);

  --hfy-border-on-dark: var(--hfy-linen-30);
  --hfy-border-on-light: var(--hfy-ink-10);
  --hfy-border-accent: var(--hfy-olive);

  /* Status (derived, used sparingly — brand doesn't define system colors) */
  --hfy-success: #4C6F56;
  --hfy-warn: #B68A3E;
  --hfy-danger: #8B3A2E;

  /* ────────────── TYPOGRAPHY ────────────── */
  --hfy-font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --hfy-font-sans:  "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --hfy-font-georgian: "Noto Sans Georgian", "Manrope", system-ui, sans-serif;
  --hfy-font-display: var(--hfy-font-serif);

  /* Type weights — display always Light (300); body uses Light/Regular/Medium */
  --hfy-w-light: 300;
  --hfy-w-regular: 400;
  --hfy-w-medium: 500;
  --hfy-w-semibold: 600;

  /* Type scale — drawn from figma frames + brandbook. Display sizes shrink responsively. */
  --hfy-display-xl: 112px;        /* Hero headline (desktop XL) */
  --hfy-display-l:  64px;         /* Section heading desktop */
  --hfy-display-m:  40px;         /* Section heading mobile / tablet H1 */
  --hfy-display-s:  32px;         /* Sub-section heading */

  --hfy-h1: 64px;
  --hfy-h2: 48px;
  --hfy-h3: 32px;
  --hfy-h4: 24px;                 /* Card/service title (figma) */
  --hfy-h5: 20px;
  --hfy-h6: 18px;

  --hfy-body-l: 18px;             /* Lead / large body (hero subhead) */
  --hfy-body-m: 16px;             /* Body default */
  --hfy-body-s: 14px;             /* Body small / nav links */
  --hfy-caption: 12px;            /* Caption, footer */
  --hfy-overline: 11px;

  /* Line heights — generous for editorial feel */
  --hfy-lh-display: 1.10;          /* tight on display */
  --hfy-lh-heading: 1.20;
  --hfy-lh-body: 1.80;             /* brand: 1.8 leading on body */
  --hfy-lh-tight: 1.40;
  --hfy-lh-ui: 1.50;

  /* Letter-spacing — display tightens; body slightly opens */
  --hfy-ls-display-tight: -0.020em;  /* −2% on big serifs */
  --hfy-ls-display: -0.010em;
  --hfy-ls-body: 0.010em;
  --hfy-ls-ui: 0.025em;              /* button/nav */
  --hfy-ls-overline: 0.20em;

  /* ────────────── SPACING ────────────── */
  /* 8-point base; brand prefers airy, generous spacing */
  --hfy-space-1: 4px;
  --hfy-space-2: 8px;
  --hfy-space-3: 12px;
  --hfy-space-4: 16px;
  --hfy-space-5: 24px;
  --hfy-space-6: 32px;
  --hfy-space-7: 48px;
  --hfy-space-8: 64px;
  --hfy-space-9: 96px;
  --hfy-space-10: 128px;

  /* ────────────── RADII ────────────── */
  /* Brand is largely rectilinear — buttons + cards are square. Pills only for icon chips. */
  --hfy-radius-0: 0px;
  --hfy-radius-1: 2px;
  --hfy-radius-2: 4px;
  --hfy-radius-3: 8px;
  --hfy-radius-pill: 999px;

  /* ────────────── BORDERS ────────────── */
  --hfy-border-hairline: 1px solid var(--hfy-border-on-light);
  --hfy-border-hairline-dark: 1px solid var(--hfy-border-on-dark);
  --hfy-border-accent-thin: 1px solid var(--hfy-olive);

  /* ────────────── ELEVATION ────────────── */
  /* Brand uses very subtle elevation. Cards rely on borders, not shadow. */
  --hfy-elev-0: none;
  --hfy-elev-1: 0 1px 2px rgba(28, 33, 29, 0.06), 0 1px 3px rgba(28, 33, 29, 0.04);
  --hfy-elev-2: 0 4px 12px rgba(28, 33, 29, 0.08);
  --hfy-elev-3: 0 12px 32px rgba(28, 33, 29, 0.12);

  /* ────────────── MOTION ────────────── */
  --hfy-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --hfy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* gentle settle */
  --hfy-dur-1: 150ms;
  --hfy-dur-2: 240ms;
  --hfy-dur-3: 400ms;
  --hfy-dur-4: 700ms;

  /* ────────────── LAYOUT ────────────── */
  --hfy-container-narrow: 768px;
  --hfy-container-default: 1280px;
  --hfy-container-wide: 1440px;
}

/* ─────────────────────────────────────────────────────────────
   Semantic typography — apply directly to elements when possible
   ───────────────────────────────────────────────────────────── */

.hfy-display-xl,
.hfy-display-l,
.hfy-display-m,
.hfy-display-s,
.hfy-h1, .hfy-h2, .hfy-h3, .hfy-h4 {
  font-family: var(--hfy-font-display);
  font-weight: var(--hfy-w-light);
  line-height: var(--hfy-lh-display);
  letter-spacing: var(--hfy-ls-display-tight);
  text-wrap: balance;
}

.hfy-display-xl { font-size: var(--hfy-display-xl); line-height: 1.10; letter-spacing: -0.020em; }
.hfy-display-l  { font-size: var(--hfy-display-l);  line-height: 1.50; letter-spacing: -0.010em; }
.hfy-display-m  { font-size: var(--hfy-display-m);  line-height: 1.10; letter-spacing: -0.020em; }
.hfy-display-s  { font-size: var(--hfy-display-s);  line-height: 1.50; letter-spacing: -0.010em; }

.hfy-h1 { font-size: var(--hfy-h1); }
.hfy-h2 { font-size: var(--hfy-h2); }
.hfy-h3 { font-size: var(--hfy-h3); }
.hfy-h4 { font-size: var(--hfy-h4); font-weight: var(--hfy-w-regular); letter-spacing: 0; }

.hfy-eyebrow {
  font-family: var(--hfy-font-sans);
  font-size: var(--hfy-overline);
  font-weight: var(--hfy-w-medium);
  letter-spacing: var(--hfy-ls-overline);
  text-transform: uppercase;
  color: var(--hfy-olive);
}

.hfy-body-l, .hfy-body-m, .hfy-body-s, .hfy-caption, .hfy-ui {
  font-family: var(--hfy-font-sans);
  font-weight: var(--hfy-w-regular);
}

.hfy-body-l  { font-size: var(--hfy-body-l);  line-height: var(--hfy-lh-body); letter-spacing: var(--hfy-ls-body); }
.hfy-body-m  { font-size: var(--hfy-body-m);  line-height: var(--hfy-lh-body); letter-spacing: var(--hfy-ls-body); }
.hfy-body-s  { font-size: var(--hfy-body-s);  line-height: 1.6; letter-spacing: var(--hfy-ls-body); }
.hfy-caption { font-size: var(--hfy-caption); line-height: 1.5; letter-spacing: var(--hfy-ls-body); color: var(--hfy-ink-70); }

.hfy-ui {
  font-size: var(--hfy-body-m);
  font-weight: var(--hfy-w-medium);
  letter-spacing: var(--hfy-ls-ui);
  line-height: 1.5;
}

/* base reset for design system pages */
.hfy-base {
  font-family: var(--hfy-font-sans);
  color: var(--hfy-ink);
  background: var(--hfy-bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}