/* ============================================================
   REnderia — Colors & Type
   Brand: VR + AI platform for real-estate sales
   Tone: dark luxury / editorial / Italian craft
   ============================================================ */

/* ---------- FONT IMPORTS ----------
   DM Sans — single typeface for both display and body.
   Modern geometric grotesque with true italic, mirroring the renderia.tech look.
   Used at light weights (200–300) for everything, italic + gold for the accent.
   On Google Fonts — license: Open Font License.
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ============ COLORS — Base ============ */
  /* Deep warm-black foundation. NOT pure black — warm undertone keeps it editorial, not "tech-dark". */
  --bg:           #080706;  /* page foundation                           */
  --bg-2:         #0f0e0c;  /* secondary surface, cards, alternating bands */
  --bg-3:         #1a1916;  /* form select option fill, deeper inset      */

  /* Gold — the single accent. Used sparingly. */
  --gold:         #c49a4a;  /* primary accent — links, CTAs, eyebrows, numerals */
  --gold-light:   #d4af72;  /* hover state for gold surfaces */
  --gold-dim:     rgba(196, 154, 74, 0.15); /* ghost numerals, watermark glyphs */

  /* Cream — light-section surfaces (used in alternating cream/dark rhythm) */
  --cream:        #f5f2eb;  /* light surface */
  --ink:          #1a1815;  /* primary text on cream */
  --ink-2:        #3a3730;  /* secondary text on cream */
  --ink-muted:    rgba(26, 24, 21, 0.5); /* muted text on cream */

  /* Foreground / text */
  --fg:           #F5F2ED;  /* warm off-white — primary text             */
  --fg-muted:     rgba(245, 242, 237, 0.45); /* body copy, secondary text */
  --fg-faint:     rgba(245, 242, 237, 0.25); /* tertiary, dividers in text */

  /* Lines */
  --border:       rgba(196, 154, 74, 0.18); /* hairline gold, fence everywhere */
  --border-strong:rgba(196, 154, 74, 0.40); /* hover/focus rings */

  /* Aliases for content roles */
  --fg1: var(--fg);
  --fg2: var(--fg-muted);
  --fg3: var(--fg-faint);
  --bg1: var(--bg);
  --accent: var(--gold);

  /* ============ TYPE — Families ============ */
  /* All three variables point to DM Sans so existing component code keeps working
     after the swap. --serif-display is kept as an alias for parity. */
  --serif-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --sans:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ TYPE — Scale ============
     Editorial. Display sizes use clamp() to flex from mobile → desktop.
  */
  --t-hero:        clamp(3.5rem, 9vw, 8rem);    /* hero H1 — "REnderia Day"   */
  --t-display:     clamp(2.5rem, 5vw, 4.5rem);  /* big CTA titles             */
  --t-h1:          clamp(2rem, 4vw, 3.5rem);    /* section titles             */
  --t-h2:          1.6rem;                       /* venue values, audience    */
  --t-h3:          1.4rem;                       /* pillar titles             */
  --t-lead:        clamp(1rem, 2vw, 1.25rem);   /* hero sub                  */
  --t-body:        1rem;                         /* default                   */
  --t-body-lg:     1.05rem;                      /* section body, generous    */
  --t-small:       0.9rem;                       /* agenda desc               */
  --t-xs:          0.78rem;                      /* CTA labels                */
  --t-eyebrow:     0.65rem;                      /* eyebrow / meta labels     */
  --t-tag:         0.7rem;                       /* venue keys                */

  /* Tracking — wide tracking on small caps is core to the brand */
  --tr-eyebrow:    0.22em;
  --tr-cta:        0.15em;
  --tr-meta:       0.20em;
  --tr-tight:      -0.01em; /* display headlines */

  /* Line heights */
  --lh-display:    1.05;
  --lh-title:      1.10;
  --lh-body:       1.70;
  --lh-body-lg:    1.6;

  /* Weights — kept LIGHT. Manrope reads thinner than Cormorant; we go down a notch.
     The brand never goes heavier than 500 except for the wordmark. */
  --w-thin:        200;
  --w-light:       300;
  --w-regular:     400;
  --w-medium:      500;
  --w-semi:        600;

  /* ============ SPACING ============ */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-28: 7rem;
  --s-32: 8rem;

  /* Section padding (vertical / horizontal) */
  --section-py: 7rem;
  --section-px: 4rem;
  --max-w:      1200px;

  /* ============ RADII ============
     The brand is squared. Radius is a hairline-only — 2px max.
     Buttons, inputs, cards are RECTANGULAR.
  */
  --r-0:  0;
  --r-1:  2px;     /* default — used everywhere a radius is allowed */
  --r-pill: 999px; /* exception, reserved for dot separators */

  /* ============ ANIMATIONS ============
     Slow, restrained. Fade-up on scroll. No bounce, no spring.
  */
  --t-fast:   0.20s;
  --t-base:   0.25s;
  --t-slow:   0.80s;
  --ease:     ease;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ============ SHADOWS ============
     Almost none. Depth is created by borders + warm-black layers, not shadow.
     Only used on the radial gold glows in hero/concept visuals.
  */
  --glow-soft: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(201,169,110,0.07) 0%, transparent 70%);
  --glow-floor: radial-gradient(ellipse 80% 40% at 50% 100%, rgba(201,169,110,0.04) 0%, transparent 60%);
  --glow-card:  radial-gradient(ellipse at center, rgba(201,169,110,0.08) 0%, transparent 70%);
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero / page title */
h1, .h1 {
  font-family: var(--serif-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--fg);
}
h1 em, .h1 em { font-style: normal; color: var(--gold); }

/* Section titles */
h2, .h2 {
  font-family: var(--serif-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--fg);
}
h2 em, .h2 em { font-style: normal; color: var(--gold); }

h3, .h3 {
  font-family: var(--serif-display);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  color: var(--fg);
}

/* Paragraph */
p, .p {
  font-family: var(--sans);
  font-size: var(--t-body-lg);
  font-weight: var(--w-light);
  line-height: var(--lh-body-lg);
  color: var(--fg-muted);
  max-width: 580px;
}

/* Eyebrow — wide-tracked uppercase, gold. The single most reused brand pattern. */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-light);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

/* Meta value — small serif numerals next to a sans label */
.meta-value {
  font-family: var(--serif-display);
  font-size: 1.4rem;
  font-weight: var(--w-regular);
  color: var(--fg);
}

/* Code / mono — barely used, but defined for completeness */
code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.85em;
}

/* Links — gold, hairline underline option */
a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
a:hover { color: var(--gold-light); }

/* Buttons — squared, no radius, wide tracking, uppercase */
.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-cta);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 3rem;
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--gold-light); color: var(--bg); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--border);
  padding: 0.55rem 1.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-1);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.btn-ghost:hover { background: var(--gold); color: var(--bg); }

/* Hairline divider */
.hairline { width: 40px; height: 1px; background: var(--border); }