/* ==========================================================================
   realestate-egy.com - single theme layer
   Built from design/tokens/*.json. This file is the ONLY place colour, size,
   radius, shadow and timing values are allowed to exist. Every page and every
   component references var(--...) from here; none redefines a value.

   Extracted from palmhills-theme, the measured winner of the lineage audit
   (0 straddling overflow at 280/320/375/414, 13 of 14 pixel-measured contrast
   pairs passing, richest internal IA). Its two measured defects are FIXED here,
   not inherited:
     * brand lockup at 1.10:1 (dark grey on dark green) -> --color-text-on-inverse
     * WhatsApp fill measured 4.33:1 with white -> --green-700 at 6.28:1

   Every ratio in a comment below was produced by scripts/contrast.py.
   Nothing here was asserted from memory.
   ========================================================================== */

:root {
  /* ---- primitive: neutral ---------------------------------------------- */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F1F0EF;
  --neutral-200: #E0DEDC;  /* 1.34:1 on white - decorative dividers ONLY */
  --neutral-300: #C6C3C0;  /* 1.75:1 on white - decorative ONLY */
  --neutral-400: #8A8886;  /* 3.53:1 on white - valid control border */
  --neutral-500: #767472;  /* 4.65:1 on white */
  --neutral-600: #6B6967;  /* 5.47:1 on white, 5.24:1 on --neutral-50 */
  --neutral-700: #4A4845;
  --neutral-800: #2C2A26;  /* 14.32:1 on white */
  --neutral-900: #181818;  /* 17.76:1 on white */
  --neutral-950: #0D0D0D;  /* 19.44:1 against white */

  /* ---- primitive: crimson (the single brand accent) --------------------- */
  --crimson-50:  #FEF2F5;
  --crimson-100: #FDE0E7;
  --crimson-300: #FF8DA8;
  --crimson-400: #F2456F;  /* 5.42:1 on --neutral-950 */
  --crimson-600: #D31148;  /* 5.33:1 on white, and white 5.33:1 on it */
  --crimson-700: #B0103E;  /* white on it = 7.02:1 */
  --crimson-800: #9A0E36;  /* white on it = 8.43:1 */

  /* ---- primitive: support ---------------------------------------------- */
  --green-400: #4ADE80;    /* 11.15:1 on --neutral-950 */
  --green-700: #0E6F34;    /* white on it = 6.28:1 - the accessible WhatsApp fill */
  --green-800: #1E6B3A;    /* 6.52:1 on white */
  --amber-400: #FBBF24;    /* 11.64:1 on --neutral-950 */
  --amber-800: #8A5A00;    /* 5.93:1 on white */
  --red-400:   #F87171;    /* 7.03:1 on --neutral-950 */
  --red-700:   #C1121F;    /* 6.22:1 on white */
  --blue-400:  #60A5FA;    /* 7.64:1 on --neutral-950 */
  --blue-700:  #1D4ED8;    /* 6.70:1 on white */
  --white:     #FFFFFF;

  /* ---- semantic: surface ----------------------------------------------- */
  --color-surface-page:    var(--white);
  --color-surface-subtle:  var(--neutral-50);
  --color-surface-card:    var(--white);
  --color-surface-inverse: var(--neutral-950);
  --color-surface-scrim:   rgba(13, 13, 13, 0.72);
  /* The photographic hero surface. NOT in the dark override map below: a
     scrim over a photograph is dark in both themes, and inverting it would
     put light text on a light scrim. */
  --color-surface-media:   var(--neutral-950);

  /* ---- semantic: text -------------------------------------------------- */
  --color-text-primary:    var(--neutral-800);
  --color-text-secondary:  var(--neutral-600);
  --color-text-tertiary:   var(--neutral-500);  /* NOT valid on --color-surface-subtle (4.46:1) */
  --color-text-on-accent:  var(--white);
  --color-text-on-inverse: var(--white);        /* 19.44:1 - the fix for the 1.10:1 lockup */
  --color-text-on-media:   var(--white);        /* 19.44:1 on --color-surface-media */
  --color-text-link:       var(--crimson-600);

  /* ---- semantic: border ------------------------------------------------ */
  --color-border-default: var(--neutral-200);   /* decorative ONLY */
  --color-border-strong:  var(--neutral-400);   /* essential control boundaries */
  --color-border-focus:   var(--crimson-600);

  /* ---- semantic: action ------------------------------------------------ */
  --color-action-primary:        var(--crimson-600);
  --color-action-primary-hover:  var(--crimson-700);
  --color-action-primary-active: var(--crimson-800);
  --color-action-secondary:      transparent;   /* never a coloured fill */
  --color-action-destructive:    var(--red-700);
  --color-action-whatsapp:       var(--green-700);

  /* ---- semantic: feedback ---------------------------------------------- */
  --color-feedback-success: var(--green-800);
  --color-feedback-warning: var(--amber-800);
  --color-feedback-error:   var(--red-700);
  --color-feedback-info:    var(--blue-700);

  /* ---- typography ------------------------------------------------------ */
  --font-display: "Jost", "Gill Sans", "Gill Sans MT", Calibri, system-ui, sans-serif;
  --font-body:    "Jost", "Gill Sans", "Gill Sans MT", Calibri, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-heading: 1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-display: 0.08em;
  --tracking-eyebrow: 0.18em;
  --tracking-normal:  0em;

  --measure-prose: 65ch;

  /* ---- spacing --------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --gutter:       var(--space-5);
  --section-y:    var(--space-16);
  --container-max: 1140px;

  /* ---- radius + border width ------------------------------------------- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  --radius-control: var(--radius-none);
  --radius-card:    var(--radius-xs);
  --radius-surface: var(--radius-md);

  --border-hairline: 1px;
  --border-control:  1px;
  --border-focus:    3px;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-raised:  0 1px 2px rgba(13, 13, 13, 0.06);
  --shadow-card:    0 2px 8px rgba(13, 13, 13, 0.08);
  --shadow-hover:   0 8px 24px rgba(13, 13, 13, 0.12);
  --shadow-overlay: 0 16px 40px rgba(13, 13, 13, 0.16);
  --shadow-modal:   0 24px 60px rgba(13, 13, 13, 0.24);
  --focus-ring:     0 0 0 2px #FFFFFF, 0 0 0 5px #D31148;

  /* ---- motion ---------------------------------------------------------- */
  /* Not 0ms: a zero duration cancels transitionend, and anything waiting on
     that event would then never run. */
  --duration-nil:  0.01ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ---- control sizing --------------------------------------------------- */
  --target-min: 44px;  /* WCAG 2.5.8 asks 24px; this project ships 44px */
  --focus-offset: 2px;

  /* ---- layout track minimums -------------------------------------------
     Floors for auto-fit grids. ALWAYS used inside min(<token>, 100%) so a
     track can still collapse below the narrowest tested viewport. A bare
     minmax with a fixed floor wider than the viewport
     is the single most common overflow cause in this portfolio. */
  --track-sm: 200px;
  --track-md: 220px;
  --track-lg: 240px;
  --track-xl: 280px;
}

/* ==========================================================================
   Dark mode. Primitives are unchanged - only the SEMANTIC layer swaps.
   Both the media query and the explicit attribute are supported so a user
   toggle always wins over the OS preference.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface-page:    var(--neutral-950);
    --color-surface-subtle:  var(--neutral-900);
    --color-surface-card:    var(--neutral-900);
    --color-surface-inverse: var(--white);
    --color-surface-scrim:   rgba(0, 0, 0, 0.80);

    --color-text-primary:    var(--white);    /* 19.44:1 on dark page */
    --color-text-secondary:  #CBD5E0;         /* 13.08:1 page, 11.95:1 card */
    --color-text-tertiary:   #A3AEC0;         /* 7.93:1 on dark card */
    --color-text-on-accent:  var(--neutral-950); /* 5.42:1 on crimson-400 */
    --color-text-on-inverse: var(--neutral-950);
    --color-text-link:       var(--crimson-400);

    --color-border-default: #2A2A2A;
    --color-border-strong:  #6B6B6B;          /* 3.65:1 on dark page */
    --color-border-focus:   var(--crimson-400);

    --color-action-primary:        var(--crimson-400);
    --color-action-primary-hover:  #FF5C81;   /* 6.57:1 on dark page */
    --color-action-primary-active: var(--crimson-300);
    --color-action-destructive:    var(--red-400);
    --color-action-whatsapp:       var(--green-400);

    --color-feedback-success: var(--green-400);
    --color-feedback-warning: var(--amber-400);
    --color-feedback-error:   var(--red-400);
    --color-feedback-info:    var(--blue-400);

    --focus-ring: 0 0 0 2px #0D0D0D, 0 0 0 5px #F2456F;
  }
}

:root[data-theme="dark"] {
  --color-surface-page:    var(--neutral-950);
  --color-surface-subtle:  var(--neutral-900);
  --color-surface-card:    var(--neutral-900);
  --color-surface-inverse: var(--white);
  --color-surface-scrim:   rgba(0, 0, 0, 0.80);

  --color-text-primary:    var(--white);
  --color-text-secondary:  #CBD5E0;
  --color-text-tertiary:   #A3AEC0;
  --color-text-on-accent:  var(--neutral-950);
  --color-text-on-inverse: var(--neutral-950);
  --color-text-link:       var(--crimson-400);

  --color-border-default: #2A2A2A;
  --color-border-strong:  #6B6B6B;
  --color-border-focus:   var(--crimson-400);

  --color-action-primary:        var(--crimson-400);
  --color-action-primary-hover:  #FF5C81;
  --color-action-primary-active: var(--crimson-300);
  --color-action-destructive:    var(--red-400);
  --color-action-whatsapp:       var(--green-400);

  --color-feedback-success: var(--green-400);
  --color-feedback-warning: var(--amber-400);
  --color-feedback-error:   var(--red-400);
  --color-feedback-info:    var(--blue-400);

  --focus-ring: 0 0 0 2px #0D0D0D, 0 0 0 5px #F2456F;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Never smooth: it makes every programmatic scroll asynchronous and it is a
     motion the user did not ask for. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  /* NOTE: this layer deliberately does NOT set overflow-x: hidden. Hiding the
     overflow is what made every theme in the portfolio report a clean document
     metric while elements were still sliced mid-word. Layouts must fit. */
}

img, svg, video, canvas { max-width: 100%; height: auto; }

/* ---- headings: the letter-spaced light display voice --------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}
h1 { font-size: var(--text-4xl); font-weight: var(--weight-light); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-regular); }
h3 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

p { margin: 0 0 var(--space-4); max-width: var(--measure-prose); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---- layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Grids must be able to shrink. minmax(Npx, 1fr) with N wider than a 280px
   viewport is the single most common overflow cause in this portfolio. */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--track-lg), 100%), 1fr));
}

/* ==========================================================================
   Focus. One rule, applied everywhere, never removed.
   ========================================================================== */
:focus-visible {
  outline: var(--border-focus) solid var(--color-border-focus);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Controls
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-3) var(--space-6);
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-text-on-accent);
}
.btn--primary:hover  { background: var(--color-action-primary-hover); }
.btn--primary:active { background: var(--color-action-primary-active); }

/* Secondary is outline + dark label. It is never a coloured fill, so the
   dark-text-on-blue failure mode cannot occur. */
.btn--secondary {
  background: var(--color-action-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-subtle); }

.btn--destructive {
  background: var(--color-action-destructive);
  color: var(--color-text-on-accent);
}

.btn--whatsapp {
  background: var(--color-action-whatsapp);
  color: var(--color-text-on-accent);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.input {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.input::placeholder { color: var(--color-text-tertiary); }
.input:focus-visible { border-color: var(--color-border-focus); }

.card {
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Broker disclosure. Opaque by construction - a prior build measured 1.01:1
   because the colour carried alpha and only pixel sampling caught it.
   Never give this component an alpha text colour or a photographic background.
   ========================================================================== */
.disclosure {
  background: var(--color-surface-media);
  color: var(--color-text-on-media);   /* 19.44:1 */
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  padding: var(--space-2) var(--gutter);
  text-align: center;
}
.disclosure a { color: var(--color-text-on-media); text-decoration: underline; }

/* ==========================================================================
   Reduced motion. Transitions collapse, and any scroll-reveal must resolve to
   its settled state - an untriggered reveal is invisible content, not a
   tasteful absence of animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--duration-nil) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duration-nil) !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}