/* =========================================================
   Innovaria Design System — Colors & Type
   ---------------------------------------------------------
   Innovaria is a premium real-estate technology brand based
   in Torrevieja & Orihuela Costa. Visual DNA: confident green,
   Mediterranean cream backgrounds, deep navy text, modern SaaS
   feel with luxury hospitality restraint.
   ========================================================= */

/* ----------  Webfont imports  ---------- */
/* HEADINGS:  Plus Jakarta Sans — geometric humanist, modern SaaS
   BODY:      Inter — neutral workhorse with excellent l-spacing
   NUMERIC:   JetBrains Mono — for valuations / data
   NOTE: Logotype letterforms (in the supplied logo PNG) are a wider
   geometric grotesque. We intentionally do NOT recreate the wordmark
   in CSS — always use the PNG. Plus Jakarta Sans is the closest match
   for adjacent UI copy. Flag for the user if a custom logotype font
   becomes available. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============= BRAND COLORS ============= */

  /* Primary green — pulled from the logo gradient.
     The logo runs a vertical gradient from a lighter mid-green at top
     to a deeper green at the base. We expose both ends + a mid. */
  --innov-green-50:   #ECF7EE;
  --innov-green-100:  #D4EDD8;
  --innov-green-200:  #A8DCB2;
  --innov-green-300:  #71C384;
  --innov-green-400:  #3FAA5A;   /* logo top (lighter) */
  --innov-green-500:  #165727;   /* PRIMARY — buttons, links, accents */
  --innov-green-600:  #08381A;   /* PRIMARY (text/hover) */
  --innov-green-700:  #156E2D;   /* logo base — wordmark color */
  --innov-green-800:  #0E5524;
  --innov-green-900:  #08381A;

  /* Brand gradient — used very sparingly on the symbol & special CTAs */
  --innov-green-gradient: linear-gradient(180deg, #3FAA5A 0%, #156E2D 100%);

  /* Navy — secondary heading color (seen in Banner 2: "¿Sabes cuánto vale tu casa?") */
  --innov-navy-50:    #EEF2F8;
  --innov-navy-100:   #D2DCEC;
  --innov-navy-300:   #6F86AE;
  --innov-navy-500:   #21407A;
  --innov-navy-700:   #14305B;   /* PRIMARY heading navy */
  --innov-navy-900:   #141c14;

  /* Cream / sand — backgrounds. Mediterranean warmth, never pure white. */
  --innov-cream-50:   #FBF9F5;   /* lightest — section background */
  --innov-cream-100:  #F6F2EA;   /* page background alt */
  --innov-cream-200:  #EDE6D7;
  --innov-cream-300:  #DCD2BC;

  /* Neutrals — warm-tinted so they sit naturally on cream */
  --innov-neutral-0:   #FFFFFF;
  --innov-neutral-50:  #F7F7F5;
  --innov-neutral-100: #EFEFEC;
  --innov-neutral-200: #E2E2DD;
  --innov-neutral-300: #C9C9C2;
  --innov-neutral-400: #9A9A92;
  --innov-neutral-500: #6E6E66;
  --innov-neutral-600: #4A4A44;
  --innov-neutral-700: #2F2F2B;
  --innov-neutral-800: #1B1B19;
  --innov-neutral-900: #0E0E0D;

  /* Semantic */
  --innov-success: var(--innov-green-600);
  --innov-warning: #C9842D;
  --innov-danger:  #C0392B;
  --innov-info:    var(--innov-navy-500);

  /* Subtle blue tint for technology / AI accents (Banner 9 references) */
  --innov-tech-50:  #EAF2FF;
  --innov-tech-500: #2F6BD8;

  /* ============= SEMANTIC TOKENS ============= */
  --bg-page:        var(--innov-cream-50);
  --bg-elevated:    var(--innov-neutral-0);
  --bg-subtle:      var(--innov-cream-100);
  --bg-inverse:     var(--innov-navy-900);
  --bg-brand:       var(--innov-green-600);
  --bg-brand-soft:  var(--innov-green-50);

  --fg-primary:     var(--innov-navy-900);   /* almost-black navy for body text */
  --fg-secondary:   var(--innov-neutral-600);
  --fg-tertiary:    var(--innov-neutral-500);
  --fg-muted:       var(--innov-neutral-400);
  --fg-inverse:     var(--innov-neutral-0);
  --fg-brand:       var(--innov-green-600);
  --fg-link:        var(--innov-green-700);

  --border-subtle:  var(--innov-neutral-200);
  --border-default: var(--innov-neutral-300);
  --border-strong:  var(--innov-neutral-400);
  --border-focus:   var(--innov-green-500);

  /* ============= TYPOGRAPHY ============= */
  --font-display:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — mobile-first; desktop ramps via clamp() */
  --fs-display-xl: clamp(2.5rem, 5vw + 1rem, 4.5rem);  /* 40 → 72 */
  --fs-display-lg: clamp(2rem, 3.5vw + 1rem, 3.5rem);  /* 32 → 56 */
  --fs-h1:         clamp(1.75rem, 2.5vw + 1rem, 2.75rem); /* 28 → 44 */
  --fs-h2:         clamp(1.5rem, 1.5vw + 1rem, 2.25rem);  /* 24 → 36 */
  --fs-h3:         clamp(1.25rem, 1vw + 0.85rem, 1.625rem); /* 20 → 26 */
  --fs-h4:         1.125rem;   /* 18 */
  --fs-body-lg:    1.125rem;   /* 18 */
  --fs-body:       1rem;       /* 16 */
  --fs-body-sm:    0.9375rem;  /* 15 */
  --fs-caption:    0.8125rem;  /* 13 */
  --fs-overline:   0.75rem;    /* 12 */

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

  /* Letter-spacing */
  --ls-tight:     -0.02em;
  --ls-snug:      -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-overline:  0.12em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ============= SPACING ============= */
  /* 4px base, generous (premium feel). */
  --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-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ============= RADII ============= */
  /* The brand leans rounded but never pill-y for surfaces.
     Pills reserved for chips & primary CTAs. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default for cards */
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;   /* hero & form panels */
  --radius-pill: 999px;

  /* ============= SHADOWS ============= */
  /* Soft, diffused. Never harsh — premium hospitality feel. */
  --shadow-xs:  0 1px 2px rgba(11, 30, 62, 0.04);
  --shadow-sm:  0 2px 6px rgba(11, 30, 62, 0.06), 0 1px 2px rgba(11, 30, 62, 0.04);
  --shadow-md:  0 8px 24px rgba(11, 30, 62, 0.08), 0 2px 4px rgba(11, 30, 62, 0.04);
  --shadow-lg:  0 18px 40px rgba(11, 30, 62, 0.10), 0 4px 8px rgba(11, 30, 62, 0.05);
  --shadow-xl:  0 30px 60px rgba(11, 30, 62, 0.14);

  /* Green-tinted glow for primary CTA */
  --shadow-cta: 0 10px 24px rgba(42, 158, 71, 0.28);

  /* ============= MOTION ============= */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);     /* primary, gentle */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot, used sparingly */
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ============= LAYOUT ============= */
  --container-max:    1200px;
  --container-narrow: 880px;
  --container-form:   560px;     /* multi-step form panel */
  --header-height:    72px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES — drop-in defaults
   ========================================================= */

body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-extra); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

p { margin: 0; line-height: var(--lh-relaxed); color: var(--fg-secondary); text-wrap: pretty; }
.lead { font-size: var(--fs-body-lg); color: var(--fg-secondary); line-height: var(--lh-relaxed); }

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--innov-green-800); }

small, .caption { font-size: var(--fs-caption); color: var(--fg-tertiary); }

.overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Highlight word — pattern used across all banners: a single word inside
   a headline switches from navy to green to draw the eye. */
.hl, .text-brand { color: var(--fg-brand); }

/* Short green underline accent — seen in Banner 2 & 8 */
.accent-bar {
  display: inline-block;
  width: 48px;
  height: 3px;
  background: var(--innov-green-600);
  border-radius: 2px;
}

/* Numeric / data */
.num, code, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Selection */
::selection { background: var(--innov-green-200); color: var(--innov-navy-900); }