/* ============================================================
   NOLAB DESIGN SYSTEM — single-file stylesheet for Lovable
   Live Beyond. Belong.
   Drop this in as src/nolab.css and import it in main.tsx (or paste into
   src/index.css). Fonts load from Google Fonts — no font files needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,300..700;1,300..700&display=swap');

:root {
/* ---- Core named brand colors ---- */
  --porcelain: #f5f4f1;
  --graphite:  #373c3f;
  --charcoal:  #12171b;
  --nolab-blue: #3a2ff2;

  /* ---- Neutral scale (cool, §8.4) ---- */
  --neutral-0:   #ffffff;
  --neutral-100: #f5f4f1;   /* Porcelain Light */
  --neutral-200: #eeece8;   /* warm paper / cream */
  --neutral-300: #d2cfc8;
  --neutral-400: #6e7578;
  --neutral-500: #373c3f;   /* Graphite */
  --neutral-600: #2a2f33;
  --neutral-700: #12171b;   /* Charcoal */
  --neutral-900: #0e1216;   /* Neutral 900 — deepest ink */

  /* hairline tints between 100–300 for fine UI lines */
  --neutral-150: #ecebe6;
  --neutral-250: #e0ded7;

  /* ---- Nolab Blue scale (§8.4) ---- */
  --blue-100: #5f55ff;
  --blue-500: #3a2ff2;
  --blue-700: #2c22c9;
  --blue-tint: #ecebfe;     /* faint wash for soft accent surfaces */

  /* ---- Vertical colors (§4.2 / §8.4) ---- */
  --terracotta-100: #b18471;   /* NOLAB Fractional */
  --terracotta-500: #9e654e;
  --terracotta-700: #855240;
  --forest-100: #4c675c;       /* NOLAB Rentas */
  --forest-500: #2f4a3e;
  --forest-700: #243a30;

  /* ---- Semantic status (functional, harmonized to palette) ---- */
  --success-600: #2f7d5b;
  --success-100: #dcefe5;
  --warning-600: #B68C14;   /* amber */
  --warning-100: #FCEEC7;
  --danger-600:  #b23b2c;
  --danger-100:  #f4ddd8;
  --info-600:    var(--blue-500);
  --info-100:    var(--blue-tint);

  /* ---- Data-viz sentiment (muted, editorial) ----
     Toned status hues so charts read editorial, not alert/SaaS.
     Recipe: status-600 80% + Graphite 20%. */
  --dataviz-positive: #317055;   /* success-600 + graphite */
  --dataviz-negative: #993b30;   /* danger-600 + graphite */

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */

  /* Surfaces */
  --surface-page:        var(--porcelain);
  --surface-card:        var(--neutral-0);
  --surface-raised:      var(--neutral-0);
  --surface-sunken:      var(--neutral-150);
  --surface-paper:       var(--neutral-200);   /* warm editorial sections */
  --surface-inverse:     var(--charcoal);      /* dark sections / footer */
  --surface-inverse-deep: var(--neutral-900);
  /* NOTE: Nolab Blue is an accent, never a surface. Do not fill sections,
     bands, or large areas with blue — use Charcoal (--surface-inverse).
     These remain only for tiny emphasis surfaces (e.g. an info callout). */
  --surface-accent:      var(--blue-500);
  --surface-accent-soft: var(--blue-tint);

  /* Photo overlay — Graphite (rgb 27,33,39 = #1B2127) 0%→78% in the lower
     third, for text legibility. NOTE: uses Graphite, not Charcoal (#12171B). */
  --photo-overlay: linear-gradient(
    to top,
    rgba(27, 33, 39, 0.78) 0%,
    rgba(27, 33, 39, 0.32) 28%,
    rgba(27, 33, 39, 0) 55%
  ); /* @kind color */
  --photo-overlay-40: rgba(27, 33, 39, 0.40);

  /* Text */
  --text-strong:    var(--neutral-900);   /* headlines */
  --text-body:      var(--graphite);      /* body copy */
  --text-muted:     var(--neutral-400);
  --text-subtle:    var(--neutral-400);
  --text-inverse:   var(--porcelain);
  --text-on-accent: #ffffff;
  --text-on-dark:   var(--porcelain);
  --text-accent:    var(--blue-500);
  --text-link:      var(--blue-500);

  /* Actions — primary CTA is Charcoal; blue is accent only */
  --action-primary:        var(--charcoal);
  --action-primary-hover:  var(--neutral-900);
  --action-on-primary:     var(--porcelain);
  --action-accent:         var(--blue-500);
  --action-accent-hover:   var(--blue-700);
  --action-disabled:       #C6C6C6;   /* disabled button fill (flat grey) */
  --action-on-disabled:    var(--neutral-400);

  /* Borders / lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--charcoal);
  --border-accent:  var(--blue-500);

  /* Interaction */
  --focus-ring: var(--blue-500);

/* Families (§5.1)
     Playfair Display — headlines, editorial messages, brand expression.
       The keyword in a headline may be set in ITALIC for emphasis.
     Plus Jakarta Sans — body, interfaces, functional communication.
     Futura — RESERVED exclusively for the wordmark (shipped as logo SVGs;
       not used in product UI, so no @font-face is provided). */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Type scale (px). Display ramp is serif; text ramp is sans. */
  --text-display-2xl: 76px;
  --text-display-xl: 60px;
  --text-display-lg: 46px;
  --text-display-md: 36px;
  --text-display-sm: 28px;

  --text-xl: 22px;
  --text-lg: 18px;
  --text-md: 16px;   /* body default */
  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 11px;

  /* Line heights — editorial type runs generous (§5.2: Body 16/1.62) */
  --leading-tight: 1.06;      /* H1 display (76/106) */
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-body: 1.62;       /* Body & Body Large */
  --leading-relaxed: 1.62;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;   /* eyebrows / overlines, uppercase */

/* ---- Spacing scale (§8.2) ----
     Microespacios: 4–8 · Entre elementos: 12–24 ·
     Entre secciones: 32–80 · Márgenes: 120–200 */
  --space-0: 0;
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;
  --space-40: 160px;
  --space-50: 200px;

  /* ---- Border radius (§8.3) ----
     Sharp, editorial. Buttons & images are square. */
  --radius-none: 0;        /* images · primary buttons */
  --radius-sm: 4px;        /* inputs · cards · CTA */
  --radius-md: 8px;        /* cards */
  --radius-lg: 16px;       /* special cards */
  --radius-cta: 20px;      /* pill inputs · rounded CTA */
  --radius-full: 999px;    /* pills · tags · status */

  /* ---- Shadow (§8.4) — three elevation tiers ----
     Soft Surface (cards) · Elevated (menus/dropdowns) · Overlay (modals).
     Cool, low-spread — never harsh black. */
  --shadow-xs: 0 1px 2px rgba(18, 23, 27, 0.05);
  --shadow-sm: 0 2px 8px rgba(18, 23, 27, 0.06);      /* Soft Surface */
  --shadow-md: 0 10px 30px rgba(18, 23, 27, 0.10);    /* Elevated Surface */
  --shadow-lg: 0 24px 60px rgba(18, 23, 27, 0.16);    /* Overlay */
  --shadow-xl: 0 36px 90px rgba(18, 23, 27, 0.20);
  --shadow-focus: 0 0 0 3px rgba(58, 47, 242, 0.26);

  /* ---- Glass / Soft — frosted material for pills & overlays over photography.
     White 12% fill · 24px backdrop blur · 1px White 18% border ·
     Shadow 01 (Soft Surface) · fully-rounded. Apply all five together. */
  --glass-soft-bg: rgba(255, 255, 255, 0.12);
  --glass-soft-blur: blur(24px) saturate(150%);   /* @kind other */
  --glass-soft-border: 1px solid rgba(255, 255, 255, 0.18); /* @kind other */
  --glass-soft-shadow: var(--shadow-sm);
  --glass-soft-radius: var(--radius-full);

  /* ---- Glass / Status — frosted Status Pill that sits over photography.
     Dark charcoal material per the Nolab website: Charcoal 32% fill, 6px
     backdrop blur, 1px warm-white 16% border, fully-rounded. White text. */
  --glass-status-bg: rgba(20, 25, 30, 0.32);
  --glass-status-blur: blur(6px);                /* @kind other */
  --glass-status-border: 1px solid rgba(217, 215, 210, 0.16); /* @kind other */
  --glass-status-radius: var(--radius-full);

  /* Layout */
  --container-max: 1240px;
  --container-wide: 1440px;
  --gutter: var(--space-8);

  /* Motion — calm, editorial, paused rhythm. No bounce. */
  --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 */
  --duration-fast: 140ms;  /* @kind other */
  --duration-base: 260ms;  /* @kind other */
  --duration-slow: 480ms;  /* @kind other */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
h1, h2, h3, h4, .nl-display {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}
h1 { font-size: var(--text-display-2xl); }
h2 { font-size: var(--text-display-lg); line-height: var(--leading-snug); }
h3 { font-size: var(--text-display-md); line-height: var(--leading-snug); }
h4 { font-size: var(--text-display-sm); line-height: var(--leading-snug); }
/* Emphasis inside a headline = italic serif, never bold */
h1 em, h2 em, h3 em, .nl-display em { font-style: italic; }
a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--blue-700); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { display: block; max-width: 100%; border-radius: var(--radius-none); }

/* ---------- Layout ---------- */
.nl-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.nl-section { padding-block: var(--space-30); }
.nl-section--paper { background: var(--surface-paper); }
.nl-section--dark { background: var(--surface-inverse); color: var(--text-on-dark); }
.nl-section--dark h1, .nl-section--dark h2, .nl-section--dark h3 { color: var(--text-inverse); }

/* ---------- Eyebrow / editorial label ---------- */
.nl-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

/* ---------- Buttons ----------
   Primary = outlined Charcoal that FILLS on hover. One per view. Never blue. */
.nl-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  padding: 14px var(--space-6); border-radius: var(--radius-none);
  cursor: pointer; background: none; border: none;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.nl-btn--primary { border: 1.5px solid var(--charcoal); color: var(--charcoal); }
.nl-btn--primary:hover { background: var(--charcoal); color: var(--action-on-primary); }
.nl-btn--primary:active { transform: scale(0.98); }
.nl-btn--ghost { color: var(--charcoal); padding-inline: 0; }
.nl-btn--ghost:hover { color: var(--nolab-blue); }
.nl-btn--paper-ghost { border: 1.5px solid rgba(245,244,241,0.55); color: var(--porcelain); }
.nl-btn--paper-ghost:hover { background: rgba(245,244,241,0.12); }
.nl-btn:disabled { background: var(--action-disabled); border-color: transparent; color: var(--neutral-0); cursor: not-allowed; }

/* ---------- Inputs ---------- */
.nl-input {
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-body);
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 12px var(--space-4); width: 100%;
}
.nl-input:focus { border-color: var(--border-accent); outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Tags ---------- */
.nl-pill { /* Status Pill — frosted, sits over photography */
  display: inline-flex; align-items: center;
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: #fff; padding: 6px var(--space-3);
  background: var(--glass-status-bg); backdrop-filter: var(--glass-status-blur);
  border: var(--glass-status-border); border-radius: var(--radius-full);
}
.nl-chip { /* Vertical Chip — business-line color */
  display: inline-flex; font-size: var(--text-2xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: #fff; padding: 6px var(--space-3); border-radius: var(--radius-full);
  background: var(--terracotta-500);
}
.nl-chip--rentas { background: var(--forest-500); }

/* ---------- Cards ---------- */
.nl-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.nl-card:hover { box-shadow: var(--shadow-md); }

/* Property card — flat, borderless, photo-led */
.nl-property { display: flex; flex-direction: column; gap: var(--space-3); }
.nl-property__frame { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--radius-none); }
.nl-property__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.nl-property:hover .nl-property__frame img { transform: scale(1.04); }
.nl-property__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-strong); }
.nl-property__price { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-strong); }
.nl-property__specs { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-body); }
.nl-property__loc { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-muted); }

/* The Dot — brand signature, blue period */
.nl-dot { color: var(--nolab-blue); }

/* Photo protection overlay — only when contrast is low */
.nl-photo-veil { position: absolute; inset: 0; background: var(--photo-overlay); pointer-events: none; }