/* ============================================================
   Edge Design System — Colors & Type
   Brand: Edge — end-to-end real-estate go-to-market agency
   ============================================================ */

/* ---------- Fonts — self-hosted Poppins ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Poppins-Thin.ttf')        format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Poppins-ThinItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf')       format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf')     format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf')      format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf')      format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf')    format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf')        format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf')   format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf')       format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

:root {
  /* ============================================================
     COLOR — BASE TOKENS
     ============================================================ */

  /* Brand primaries */
  --edge-mint:        #ceeae1;   /* Primary light — calm, premium, real-estate-friendly */
  --edge-deep:        #0f3045;   /* Primary deep — corporate, trustworthy */
  --edge-clay:        #d95427;   /* Accent — energy, attention, CTAs */

  /* Neutrals */
  --edge-ink:         #1a1a1a;   /* Body text, headings on light */
  --edge-paper:       #ffffff;   /* Canvas */
  --edge-paper-warm:  #faf8f5;   /* Optional warm paper for editorial sections */

  /* Tinted neutrals (derived from mint + deep) */
  --edge-mint-50:     #f3faf7;
  --edge-mint-100:    #e4f3ec;
  --edge-mint-200:    #ceeae1;   /* = brand mint */
  --edge-mint-300:    #a9d3c5;
  --edge-mint-400:    #7eb6a3;

  --edge-deep-900:    #07202f;
  --edge-deep-800:    #0f3045;   /* = brand deep */
  --edge-deep-700:    #1c4660;
  --edge-deep-500:    #4b6c82;
  --edge-deep-300:    #8aa3b4;
  --edge-deep-100:    #d6dfe6;

  --edge-clay-700:    #b53d18;
  --edge-clay-600:    #d95427;   /* = brand accent */
  --edge-clay-300:    #f1a384;
  --edge-clay-100:    #fbe1d5;

  /* Grays */
  --edge-gray-50:     #f6f6f6;
  --edge-gray-100:    #ececec;
  --edge-gray-200:    #d9d9d9;
  --edge-gray-300:    #bfbfbf;
  --edge-gray-500:    #8a8a8a;
  --edge-gray-700:    #4a4a4a;
  --edge-gray-900:    #1a1a1a;   /* = ink */

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */

  /* Surface */
  --bg:               var(--edge-paper);
  --bg-alt:           var(--edge-mint-100);
  --bg-inverse:       var(--edge-deep-800);
  --bg-accent:        var(--edge-clay-600);

  /* Foreground */
  --fg:               var(--edge-ink);
  --fg-muted:         var(--edge-gray-700);
  --fg-subtle:        var(--edge-gray-500);
  --fg-inverse:       var(--edge-paper);
  --fg-on-mint:       var(--edge-deep-800);
  --fg-on-deep:       var(--edge-mint-200);
  --fg-on-accent:     var(--edge-paper);

  /* Border */
  --border:           var(--edge-gray-200);
  --border-strong:    var(--edge-ink);
  --border-on-deep:   rgba(255,255,255,0.12);
  --border-on-mint:   rgba(15,48,69,0.12);

  /* Accent / interactive */
  --accent:           var(--edge-clay-600);
  --accent-hover:     var(--edge-clay-700);
  --link:             var(--edge-clay-600);
  --link-hover:       var(--edge-clay-700);

  /* Status (kept minimal — not a heavy semantic palette) */
  --success:          #2f7a5a;
  --warning:          #c08a1e;
  --danger:           var(--edge-clay-700);

  /* ============================================================
     TYPOGRAPHY — BASE TOKENS
     ============================================================ */
  --font-heading:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:       'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light:        300;       /* @kind font */
  --fw-regular:      400;       /* @kind font */
  --fw-medium:       500;       /* @kind font */
  --fw-semibold:     600;       /* @kind font */
  --fw-bold:         700;       /* @kind font */

  /* Type scale (1.250 minor third, fluid optional) */
  --fs-display:      clamp(3.5rem, 6vw, 5.5rem); /* @kind font */ /* 56–88 */
  --fs-h1:           clamp(2.5rem, 4.2vw, 3.75rem); /* @kind font */
  --fs-h2:           clamp(2rem, 3.2vw, 2.75rem); /* @kind font */
  --fs-h3:           1.75rem; /* @kind font */ /* 28 */
  --fs-h4:           1.375rem; /* @kind font */ /* 22 */
  --fs-h5:           1.125rem; /* @kind font */ /* 18 */
  --fs-h6:           1rem; /* @kind font */ /* 16 */
  --fs-body:         1rem;      /* @kind font */
  --fs-body-lg:      1.125rem;  /* @kind font */
  --fs-body-sm:      0.875rem;  /* @kind font */
  --fs-caption:      0.75rem; /* @kind font */ /* 12 */
  --fs-eyebrow:      0.75rem;   /* @kind font */

  --lh-tight:        1.05;      /* @kind font */
  --lh-snug:         1.2;       /* @kind font */
  --lh-normal:       1.5;       /* @kind font */
  --lh-loose:        1.7;       /* @kind font */

  --tracking-tight:  -0.02em;   /* @kind font */
  --tracking-normal: 0;         /* @kind font */
  --tracking-wide:   0.08em; /* @kind font */ /* eyebrows + small caps */
  --tracking-wider:  0.16em;    /* @kind font */

  /* ============================================================
     SPACING / RADII / SHADOWS / MOTION
     ============================================================ */
  --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;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(15,48,69,0.06);
  --shadow-sm:  0 2px 6px rgba(15,48,69,0.06), 0 1px 2px rgba(15,48,69,0.04);
  --shadow-md:  0 8px 24px rgba(15,48,69,0.08);
  --shadow-lg:  0 24px 60px rgba(15,48,69,0.12);
  --shadow-accent: 0 12px 32px rgba(217,84,39,0.28);

  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:       150ms; /* @kind other */
  --dur-base:       240ms; /* @kind other */
  --dur-slow:       420ms; /* @kind other */

  /* Layout */
  --container:      1280px; /* @kind spacing */
  --gutter:         clamp(20px, 4vw, 48px); /* @kind spacing */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.edge,
.edge * { box-sizing: border-box; }

.edge {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.edge h1, .edge .h1,
.edge h2, .edge .h2,
.edge h3, .edge .h3,
.edge h4, .edge .h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--fg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.edge .display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: 0.98; letter-spacing: -0.03em; }
.edge h1, .edge .h1 { font-size: var(--fs-h1); }
.edge h2, .edge .h2 { font-size: var(--fs-h2); }
.edge h3, .edge .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.edge h4, .edge .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: var(--lh-snug); }
.edge h5, .edge .h5 { font-family: var(--font-heading); font-size: var(--fs-h5); font-weight: var(--fw-medium); letter-spacing: 0; line-height: var(--lh-snug); margin: 0; }
.edge h6, .edge .h6 { font-family: var(--font-heading); font-size: var(--fs-h6); font-weight: var(--fw-medium); margin: 0; }

.edge p, .edge .body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}

.edge .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.edge .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.edge .caption { font-size: var(--fs-caption); color: var(--fg-subtle); letter-spacing: 0.02em; }

.edge .eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.edge .lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--fg);
  text-wrap: pretty;
}

.edge a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
.edge a:hover { color: var(--link-hover); }

.edge .accent { color: var(--accent); }
.edge .ink    { color: var(--fg); }
.edge .muted  { color: var(--fg-muted); }

/* Mark / highlight (used sparingly in headlines) */
.edge mark, .edge .mark {
  background: transparent;
  color: var(--accent);
  font-weight: inherit;
}