/* =========================================================================
   Power Real Estate Group — Design Tokens
   Aligned to official brand guidelines (May 2026).
   ========================================================================= */

/* ---------- Fonts ------------------------------------------------------
   The entire system runs on Inter — a single, geometric-humanist family
   that's the most widely cached web font on the internet (Vercel, Linear,
   GitHub, Notion, Stripe, Figma all use it), so most visitors already
   have it in their browser cache.

   Hierarchy is achieved through weight + tracking, not multiple families:
     • H1 / Hero       → Inter 800, uppercase, tracked +0.04em
     • H2 / Section    → Inter 700
     • H3 / Subheading → Inter 600
     • Body            → Inter 500
     • Caption / Label → Inter 400

   This replaces the brand-guide stack (Glacial Indifference / League
   Spartan / Codec Pro / Poppins) for performance. The visual hierarchy
   and feel are preserved.
   ------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand palette (from official guideline)
     ===================================================================== */
  --electric-blue: #2185F7;   /* Dominant brand color, 60–70% visual weight */
  --white:         #FFFFFF;
  --blue-steel:    #3878BD;   /* Supporting tone ONLY — never primary */
  --platinum:      #F4F6F9;   /* Off-white surface */
  --charcoal:      #3D3E3C;   /* Primary text on light backgrounds */

  /* Tints / scale derived from Electric Blue (for hover, surfaces, accents) */
  --electric-blue-50:  #E9F3FE;
  --electric-blue-100: #D2E7FD;
  --electric-blue-200: #A5CFFB;
  --electric-blue-300: #79B7F9;
  --electric-blue-400: #4A9EF8;
  --electric-blue-500: #2185F7;   /* canonical */
  --electric-blue-600: #176FDE;
  --electric-blue-700: #1058B3;
  --electric-blue-800: #0D4488;
  --electric-blue-900: #0B3470;

  /* Charcoal scale (cool neutral, never warm gray) */
  --charcoal-50:  #F4F6F9;       /* = Platinum */
  --charcoal-100: #E6E9EE;
  --charcoal-200: #D0D5DD;
  --charcoal-300: #A6ACB5;
  --charcoal-400: #7A8088;
  --charcoal-500: #5A6168;
  --charcoal-600: #45494C;
  --charcoal-700: #3D3E3C;       /* canonical Charcoal Black */
  --charcoal-800: #2A2B29;
  --charcoal-900: #161716;

  /* Semantic — never green; success is sky-blue */
  --success-500: #0EA5E9;
  --success-50:  #E0F2FE;
  --warning-500: #F59E0B;
  --warning-50:  #FEF3C7;
  --danger-500:  #EF4444;
  --danger-50:   #FEE2E2;
  --problem-red: #991B1B;
  --info-500:    var(--electric-blue);
  --info-50:     var(--electric-blue-50);

  /* Foreground (text) — semantic */
  --fg-1: var(--charcoal);              /* primary text, headings on light */
  --fg-2: var(--charcoal-600);          /* body */
  --fg-3: var(--charcoal-500);          /* secondary / supporting */
  --fg-4: var(--charcoal-400);          /* placeholder / tertiary */
  --fg-inverse: var(--white);
  --fg-brand: var(--electric-blue);

  /* Background — semantic */
  --bg-1: var(--white);
  --bg-2: var(--platinum);
  --bg-3: var(--charcoal-100);
  --bg-brand: var(--electric-blue);
  --bg-brand-subtle: var(--electric-blue-50);
  --bg-inverse: var(--charcoal);

  /* Border — semantic */
  --border-1: var(--charcoal-100);
  --border-2: var(--charcoal-200);
  --border-strong: var(--charcoal-300);
  --border-brand: var(--electric-blue);

  /* =====================================================================
     TYPOGRAPHY — Single family (Inter) with weight-based hierarchy.
     ===================================================================== */
  --font-display:  'Inter', system-ui, -apple-system, sans-serif;   /* H1 / Hero */
  --font-section:  'Inter', system-ui, -apple-system, sans-serif;   /* H2 / Section Title */
  --font-sub:      'Inter', system-ui, -apple-system, sans-serif;   /* H3 / Subheading */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;   /* Body / Caption */
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;       /* Tabular data only */

  /* Type scale — anchored to brand guide pt sizes (treated as px for screen) */
  --fs-caption: 12px;
  --fs-meta:    13px;
  --fs-body:    16px;   /* Poppins SemiBold (per guide) */
  --fs-body-lg: 18px;
  --fs-sub:     20px;   /* Codec Pro / Manrope (H3) */
  --fs-sub-lg:  24px;
  --fs-section: 28px;   /* League Spartan (H2) */
  --fs-section-lg: 36px;
  --fs-hero:    40px;   /* Glacial Indifference (H1) */
  --fs-hero-lg: 52px;
  --fs-display: 72px;   /* oversized marketing display */

  /* Weights */
  --fw-light:    300;   /* Poppins Light captions */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;   /* Poppins body default */
  --fw-bold:     700;
  --fw-black:    800;
  --fw-heavy:    900;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Tracking — Hero is "tracked wide" per guide */
  --tr-hero:    0.04em;
  --tr-section: 0.02em;
  --tr-normal:  0;
  --tr-tight:   -0.01em;
  --tr-eyebrow: 0.16em;

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

  --section-y-lg: 80px;
  --section-y-md: 56px;
  --section-y-sm: 40px;

  /* =====================================================================
     RADII — soft rounded, approachable-premium
     ===================================================================== */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  /* =====================================================================
     SHADOWS — brand-tinted (steel-blue tint), two-layer, never pure black
     ===================================================================== */
  --shadow-1: 0 1px 2px rgba(11, 52, 112, 0.04), 0 1px 1px rgba(11, 52, 112, 0.03);
  --shadow-2: 0 4px 12px rgba(11, 52, 112, 0.06), 0 2px 4px rgba(11, 52, 112, 0.04);
  --shadow-3: 0 16px 40px rgba(11, 52, 112, 0.12), 0 4px 12px rgba(11, 52, 112, 0.06);
  --shadow-4: 0 28px 64px rgba(11, 52, 112, 0.18), 0 8px 24px rgba(11, 52, 112, 0.08);
  --shadow-focus: 0 0 0 4px var(--electric-blue-100);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container-max: 1200px;
  --container-pad: 24px;
  --nav-height:    72px;

  /* =====================================================================
     LEGACY ALIASES — for older preview cards / kit components.
     Prefer the canonical names above in new work.
     ===================================================================== */
  --brand-50:  var(--electric-blue-50);
  --brand-100: var(--electric-blue-100);
  --brand-200: var(--electric-blue-200);
  --brand-300: var(--electric-blue-300);
  --brand-400: var(--electric-blue-400);
  --brand-500: var(--electric-blue-500);
  --brand-600: var(--electric-blue-600);
  --brand-700: var(--electric-blue-700);
  --brand-800: var(--electric-blue-800);
  --brand-900: var(--electric-blue-900);

  --ink-0:   var(--white);
  --ink-50:  var(--charcoal-50);
  --ink-100: var(--charcoal-100);
  --ink-200: var(--charcoal-200);
  --ink-300: var(--charcoal-300);
  --ink-400: var(--charcoal-400);
  --ink-500: var(--charcoal-500);
  --ink-600: var(--charcoal-600);
  --ink-700: var(--charcoal-700);
  --ink-800: var(--charcoal-800);
  --ink-900: var(--charcoal-900);

  --font-sans: var(--font-body);
}

/* =========================================================================
   BASE RESET + ELEMENT STYLES
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);   /* Inter 500 = body baseline */
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  text-wrap: pretty;
}

/* HEADINGS — strict per brand guide */

/* H1 / Hero: Inter 800, uppercase, tracked wide, Electric Blue or White */
h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-hero), 4.6vw, var(--fs-hero-lg));
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-tight);
  color: var(--electric-blue);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  text-transform: uppercase;
}

/* H2 / Section Title: Inter 700, Charcoal or White */
h2 {
  font-family: var(--font-section);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-section), 3.2vw, var(--fs-section-lg));
  letter-spacing: var(--tr-section);
  line-height: var(--lh-tight);
  color: var(--charcoal);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

/* H3 / Subheading: Inter 600, Charcoal */
h3 {
  font-family: var(--font-sub);
  font-weight: var(--fw-semibold);
  font-size: clamp(var(--fs-sub), 2.2vw, var(--fs-sub-lg));
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--charcoal);
  margin: 0 0 var(--space-3);
}

h4 {
  font-family: var(--font-sub);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  color: var(--charcoal);
  margin: 0 0 var(--space-3);
}

h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--charcoal);
  margin: 0 0 var(--space-2);
}

h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-3);
  margin: 0 0 var(--space-2);
}

/* Body / Caption — Inter, weight-based hierarchy */
p {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);   /* Inter 500 reads as body */
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

.caption,
small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

/* Eyebrow — small uppercase label above section titles */
.eyebrow,
[data-eyebrow] {
  display: inline-block;
  font-family: var(--font-section);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--electric-blue);
  margin-bottom: var(--space-3);
}

/* Links */
a {
  color: var(--electric-blue-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--electric-blue-700); text-decoration: underline; }

/* Mono / tabular */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.tabular, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

::selection {
  background: var(--electric-blue-100);
  color: var(--electric-blue-900);
}

:focus-visible {
  outline: 2px solid var(--electric-blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}