/**
 * Engel & Völkers Chicago North Shore
 * Design System — CSS Variables
 * 
 * Source: EV Identity Standards Manual 2020
 * 
 * ⚠️  FONT NOTE: NewtextEF ML Regular is a proprietary Elsner+Flake font.
 *     This file substitutes Cormorant Garamond (Google Fonts) for display/headline use.
 *     Helvetica Neue → Inter (Google Fonts).
 *     Times New Roman → system serif stack.
 *     For production print, obtain licensed fonts via BrandCentral.evrealestate.com
 */

/* Official EV fonts — loaded from fonts/ directory */
@font-face {
  font-family: 'EngelVoelkersHead';
  src: url('fonts/EngelVoelkersHead_Rg.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EngelVoelkersHead';
  src: url('fonts/EngelVoelkersHead_Bd.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EngelVoelkersText';
  src: url('fonts/EngelVoelkersText_Lt.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EngelVoelkersText';
  src: url('fonts/EngelVoelkersText_Rg.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EngelVoelkersText';
  src: url('fonts/EngelVoelkersText_Bd.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Fallback web font for non-local contexts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   BASE COLOR TOKENS
   Source: EV Identity Standards Manual Ch. 3.2
   ============================================================ */
:root {
  /* Primary palette */
  --color-white:        #FFFFFF;   /* Pantone n/a     — primary background */
  --color-red:          #FF0000;   /* Pantone Red 032 — accent, logo "&"   */
  --color-black:        #1a1a1a;   /* Pantone Black C — primary text (logo uses near-black #1a1a1a) */
  --color-grey:         #919295;   /* Pantone Cool Gray 8 — secondary text */

  /* Extended neutrals (derived for digital use) */
  --color-grey-light:   #E8E8E9;   /* Light UI backgrounds                 */
  --color-grey-mid:     #C4C4C5;   /* Borders, dividers                    */
  --color-grey-dark:    #444444;   /* Video headline text (spec from Ch.8) */
  --color-off-white:    #F7F6F5;   /* Warm page background                 */

  /* Transparency variants */
  --color-white-85:     rgba(255, 255, 255, 0.85);  /* Text overlay box (spec: 85% opacity) */
  --color-white-90:     rgba(255, 255, 255, 0.90);  /* Text overlay box variant             */
  --color-white-95:     rgba(255, 255, 255, 0.95);  /* Near-opaque container                */

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */
  --color-bg:           var(--color-white);
  --color-bg-alt:       var(--color-off-white);
  --color-fg:           var(--color-black);
  --color-fg-secondary: var(--color-grey);
  --color-accent:       var(--color-red);
  --color-border:       var(--color-grey-mid);
  --color-overlay:      var(--color-white-85);

  /* ============================================================
     TYPOGRAPHY — FONT FAMILIES
     Source: EV Identity Standards Manual Ch. 3.1
     ============================================================ */

  /* Display / Headline — Official EV Headline font */
  --font-display:       'EngelVoelkersHead', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Body / Marketing copy — Official EV Text font */
  --font-sans:          'EngelVoelkersText', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* UI / Fallback sans */
  --font-ui:            'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Correspondence / Disclaimers — Times or Times New Roman */
  --font-serif:         'Times New Roman', Times, Georgia, serif;

  /* Email only — Verdana */
  --font-email:         Verdana, Geneva, sans-serif;

  /* ============================================================
     TYPOGRAPHY — SCALE
     ============================================================ */
  
  /* Display sizes (headlines in print) */
  --font-size-display-xl:  3.5rem;    /* ~56px — Billboard/large format headline */
  --font-size-display-lg:  2.5rem;    /* ~40px — Full-page ad headline           */
  --font-size-display-md:  2rem;      /* ~32px — Section headline                */
  --font-size-display-sm:  1.5rem;    /* ~24px — Sub-headline                    */

  /* Body sizes */
  --font-size-lg:       1.125rem;   /* ~18px — Lead paragraph                  */
  --font-size-md:       1rem;       /* ~16px — Standard body                   */
  --font-size-sm:       0.875rem;   /* ~14px — Secondary text                  */
  --font-size-xs:       0.75rem;    /* ~12px — Captions, disclaimers           */
  --font-size-xxs:      0.625rem;   /* ~10px — Legal disclaimers               */

  /* Font weights */
  --font-weight-light:  300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* Letter spacing — EV spec: wide tracking for headlines */
  --tracking-display:   0.25em;     /* Wide spaced-caps for headlines          */
  --tracking-normal:    0.02em;     /* Subtle tracking for body                */
  --tracking-tight:     0;

  /* Line heights */
  --leading-tight:      1.1;
  --leading-display:    1.2;
  --leading-body:       1.6;
  --leading-loose:      1.8;

  /* ============================================================
     SEMANTIC TYPOGRAPHY ROLES
     ============================================================ */
  
  /* H1 — Primary page headline (NewtextEF sub → Cormorant Garamond) */
  --h1-font:            var(--font-display);
  --h1-size:            var(--font-size-display-lg);
  --h1-weight:          var(--font-weight-regular);
  --h1-tracking:        var(--tracking-display);
  --h1-leading:         var(--leading-display);
  --h1-transform:       uppercase;
  --h1-color:           var(--color-black);

  /* H2 — Section headline */
  --h2-font:            var(--font-display);
  --h2-size:            var(--font-size-display-md);
  --h2-weight:          var(--font-weight-regular);
  --h2-tracking:        var(--tracking-display);
  --h2-leading:         var(--leading-display);
  --h2-transform:       uppercase;
  --h2-color:           var(--color-black);

  /* H3 — Sub-section headline */
  --h3-font:            var(--font-sans);
  --h3-size:            var(--font-size-display-sm);
  --h3-weight:          var(--font-weight-bold);
  --h3-tracking:        var(--tracking-normal);
  --h3-leading:         var(--leading-display);
  --h3-transform:       none;
  --h3-color:           var(--color-black);

  /* p — Body paragraph */
  --p-font:             var(--font-sans);
  --p-size:             var(--font-size-md);
  --p-weight:           var(--font-weight-regular);
  --p-tracking:         var(--tracking-normal);
  --p-leading:          var(--leading-body);
  --p-color:            var(--color-fg);

  /* small — Secondary / caption text */
  --small-font:         var(--font-sans);
  --small-size:         var(--font-size-sm);
  --small-weight:       var(--font-weight-regular);
  --small-color:        var(--color-grey);

  /* label — Contact info, metadata */
  --label-font:         var(--font-sans);
  --label-size:         var(--font-size-sm);
  --label-weight:       var(--font-weight-bold);
  --label-tracking:     var(--tracking-normal);
  --label-color:        var(--color-black);

  /* disclaimer — Legal text */
  --disclaimer-font:    var(--font-serif);
  --disclaimer-size:    var(--font-size-xxs);
  --disclaimer-color:   var(--color-grey);
  --disclaimer-leading: 1.4;

  /* ============================================================
     SPACING SYSTEM
     ============================================================ */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ============================================================
     BORDER & RADIUS
     ============================================================ */
  --radius:      0;         /* All containers: sharp corners (no rounding) */
  --radius-pill: 0;         /* Buttons: also sharp — no pill shapes         */

  /* Borders */
  --border-thin:    1px solid var(--color-border);
  --border-medium:  2px solid var(--color-border);

  /* Red accent line — signature EV design element */
  --red-line-print: 4px;    /* 4pt in print spec */
  --red-line-digital: 2px;  /* 2px in digital spec */
  --red-line-video:  5px;   /* 5px in video spec */

  /* ============================================================
     SHADOWS & ELEVATION
     ============================================================ */
  /* EV brand does not specify drop shadows — minimal/no shadow system */
  --shadow-none:    none;
  --shadow-subtle:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.10);

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-fg);
  background-color: var(--color-bg);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  text-transform: var(--h1-transform);
  color: var(--h1-color);
  margin: 0 0 var(--space-6);
}

h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  text-transform: var(--h2-transform);
  color: var(--h2-color);
  margin: 0 0 var(--space-4);
}

h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  color: var(--h3-color);
  margin: 0 0 var(--space-3);
}

p {
  font-family: var(--p-font);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  letter-spacing: var(--p-tracking);
  line-height: var(--p-leading);
  color: var(--p-color);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

small, .text-small {
  font-family: var(--small-font);
  font-size: var(--small-size);
  color: var(--small-color);
}

/* Disclaimer text (legal) */
.disclaimer {
  font-family: var(--disclaimer-font);
  font-size: var(--disclaimer-size);
  color: var(--disclaimer-color);
  line-height: var(--disclaimer-leading);
}

/* ============================================================
   EV SIGNATURE COMPONENTS
   ============================================================ */

/* The red line accent — used below headlines in print and digital */
.ev-red-line {
  display: block;
  width: 100%;
  height: var(--red-line-digital);
  background-color: var(--color-red);
  border: none;
  margin: var(--space-4) 0;
}

.ev-red-line--wide {
  width: 416px;  /* Social media spec */
}

/* Text overlay box — white semi-transparent container over photos */
.ev-overlay-box {
  background-color: var(--color-white-85);
  padding: var(--space-6) var(--space-8);
}

/* Separator dot — used between contact info items */
/* Usage: Sally Sample <span class="ev-dot"></span> Engel & Völkers Chicago North Shore */
.ev-dot::before {
  content: ' · ';
  color: var(--color-grey);
}

/* Headline with wide tracking (display style) */
.ev-headline {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  color: var(--color-black);
}

/* Red accent line variant for color */
.ev-headline--accent {
  color: var(--color-red);
}

/* Contact info block */
.ev-contact {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-black);
  line-height: 1.6;
}

.ev-contact strong {
  font-weight: var(--font-weight-bold);
}

/* Snipe label (NEW TO MARKET / OPEN HOUSE / SOLD) */
.ev-snipe {
  display: inline-block;
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
}

/* ============================================================
   BUTTON STYLES
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-8);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  border-radius: var(--radius);
}

.btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn--primary:hover {
  opacity: 0.8;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-black);
  border: 1.5px solid var(--color-black);
}

.btn--outline:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn--red {
  background-color: var(--color-red);
  color: var(--color-white);
}

.btn--red:hover {
  opacity: 0.85;
}

/* ============================================================
   CARD STYLES
   ============================================================ */
.ev-card {
  background: var(--color-white);
  border: var(--border-thin);
  border-radius: var(--radius);
  overflow: hidden;
}

.ev-card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.ev-card__body {
  padding: var(--space-5) var(--space-6);
}

.ev-card__price {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  margin: 0 0 var(--space-2);
}

.ev-card__address {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-grey);
  margin: 0 0 var(--space-3);
}

.ev-card__meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-grey);
  display: flex;
  gap: var(--space-4);
}