/* ═══════════════════════════════════════════════════════════
   RADIX DESIGN SYSTEM — Core tokens
   Colors · Typography · Spacing · Surfaces · Motion · Components
   =================================================================
   Brand: Radix (LATAM Real Estate Platform)
   Source: Corporate Identity System v3 (Março 2026) + live product UI
   =============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  /* ── BRAND PALETTE (closed — no external colors permitted) ── */
  --radix-grafite:  #252525;  /* Preto Grafite — max contrast dark */
  --radix-petroleo: #1F2C43;  /* Azul Petróleo Profundo — primary bg */
  --radix-chumbo:   #3E4C59;  /* Cinza Chumbo — surfaces / cards */
  --radix-nuvem:    #D8D8D8;  /* Cinza Nuvem — text on dark */
  --radix-aqua:     #8BAAAD;  /* Azul Acinzentado — accent / symbol / links */
  --radix-white:    #FFFFFF;
  --radix-offwhite: #F4F4F2;

  /* Product-observed deeper petroleo (for scenic/ghost-logo backgrounds) */
  --radix-petroleo-deep: #17233A;

  /* ── SEMANTIC FOREGROUND / BACKGROUND ── */
  --bg-1:  var(--radix-petroleo);
  --bg-2:  var(--radix-grafite);
  --bg-3:  var(--radix-chumbo);
  --bg-scenic: var(--radix-petroleo-deep);
  --bg-light-1: var(--radix-white);
  --bg-light-2: var(--radix-offwhite);

  --fg-1: var(--radix-white);
  --fg-2: rgba(216, 216, 216, 0.72);
  --fg-3: rgba(216, 216, 216, 0.45);
  --fg-muted: rgba(216, 216, 216, 0.25);

  --fg-dark-1: var(--radix-petroleo);
  --fg-dark-2: rgba(31, 44, 67, 0.65);
  --fg-dark-3: rgba(31, 44, 67, 0.4);
  --fg-dark-muted: rgba(31, 44, 67, 0.25);

  --accent:        var(--radix-aqua);
  --accent-dim:    rgba(139, 170, 173, 0.65);
  --accent-wash:   rgba(139, 170, 173, 0.08);
  --accent-edge:   rgba(139, 170, 173, 0.22);
  --accent-edge-strong: rgba(139, 170, 173, 0.38);

  --rule-dark:  rgba(255, 255, 255, 0.08);
  --rule-dark-strong: rgba(255, 255, 255, 0.14);
  --rule-light: rgba(31, 44, 67, 0.10);

  /* ── STATUS TOKEN (derived from palette — no external color) ── */
  --status-live-dot: var(--radix-aqua);

  /* ── TYPOGRAPHY ── */
  --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --w-extralight: 200;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* Scale — Outfit (product-calibrated) */
  --t-hero-size:     96px;  --t-hero-weight: 800;     --t-hero-track: -3px;    --t-hero-lh: 0.92;
  --t-display-size:  64px;  --t-display-weight: 700;  --t-display-track: -2px; --t-display-lh: 0.95;
  --t-headline-size: 44px;  --t-headline-weight: 700; --t-headline-track: -1px;--t-headline-lh: 1.05;
  --t-question-size: 36px;  --t-question-weight: 600; --t-question-track: -0.8px; --t-question-lh: 1.1; /* product card questions */
  --t-section-size:  28px;  --t-section-weight: 600;  --t-section-track: 0;    --t-section-lh: 1.15;
  --t-sub-size:      20px;  --t-sub-weight: 500;      --t-sub-track: 0;        --t-sub-lh: 1.35;
  --t-body-size:     16px;  --t-body-weight: 400;     --t-body-track: 0;       --t-body-lh: 1.7;
  --t-small-size:    13px;  --t-small-weight: 400;    --t-small-track: 0;      --t-small-lh: 1.55;
  --t-label-size:    11px;  --t-label-weight: 400;    --t-label-track: 2.5px;  --t-label-lh: 1.4;
  --t-caps-size:     10px;  --t-caps-weight: 400;     --t-caps-track: 2.5px;   --t-caps-lh: 1.4;
  --t-nav-size:      12px;  --t-nav-weight: 500;      --t-nav-track: 2px;      /* top-nav items */

  /* ── SPACING — 8pt grid ── */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;

  --mx: 80px;
  --mx-sm: 40px;

  /* ── RADII ── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 28px;       /* hero glass cards in product */
  --r-pill: 999px;

  /* ── BORDERS ── */
  --border-hairline: 1px solid var(--rule-dark);
  --border-subtle:   1px solid rgba(255,255,255,0.10);
  --border-glass:    1px solid rgba(255,255,255,0.14);
  --border-aqua:     1px solid var(--accent-edge);
  --border-dark:     1px solid var(--rule-light);

  /* ── SHADOWS — deep, soft, untinted ── */
  --elev-1: 0 8px 16px rgba(0,0,0,0.18);
  --elev-2: 0 16px 32px rgba(0,0,0,0.24);
  --elev-3: 0 24px 48px rgba(0,0,0,0.35);
  --elev-4: 0 32px 64px rgba(0,0,0,0.50);

  /* ── LIQUID GLASS TOKENS (the canonical three + product variants) ── */

  /* Glass Light — cards / panels / modals on dark */
  --glass-light-bg: rgba(255,255,255,0.05);
  --glass-light-border: 1px solid rgba(255,255,255,0.10);
  --glass-light-border-top: rgba(255,255,255,0.22);
  --glass-light-blur: blur(32px) saturate(1.5);
  --glass-light-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 32px 64px rgba(0,0,0,0.25);

  /* Glass Dark — overlays / nav / stat chips */
  --glass-dark-bg: rgba(31,44,67,0.72);
  --glass-dark-border: 1px solid rgba(62,76,89,0.50);
  --glass-dark-border-top: rgba(139,170,173,0.18);
  --glass-dark-blur: blur(24px) saturate(1.3);
  --glass-dark-shadow: 0 20px 40px rgba(0,0,0,0.30);

  /* Glass Aqua — badges / tags / accent */
  --glass-aqua-bg: rgba(139,170,173,0.08);
  --glass-aqua-border: 1px solid var(--accent-edge);
  --glass-aqua-border-top: var(--accent-edge-strong);
  --glass-aqua-blur: blur(20px);

  /* ── MOTION — quiet, never bouncy ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ═══════════════════════════════════════════════════════════
   SEMANTIC ELEMENT STYLES
   =============================================================== */

body.radix, .radix-root {
  font-family: var(--font-sans);
  background: var(--bg-1);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
}

.radix-hero {
  font-family: var(--font-sans);
  font-size: var(--t-hero-size);
  font-weight: var(--t-hero-weight);
  letter-spacing: var(--t-hero-track);
  line-height: var(--t-hero-lh);
  color: var(--fg-1);
}
.radix-hero em { font-style: normal; color: var(--accent); }

.radix-display {
  font-family: var(--font-sans);
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-track);
  line-height: var(--t-display-lh);
  color: var(--fg-1);
}
.radix-display em { font-style: normal; color: var(--accent); }

.radix-headline, h1.radix {
  font-size: var(--t-headline-size);
  font-weight: var(--t-headline-weight);
  letter-spacing: var(--t-headline-track);
  line-height: var(--t-headline-lh);
  color: var(--fg-1);
}

.radix-question {
  /* Product-observed: big glass-card questions */
  font-size: var(--t-question-size);
  font-weight: var(--t-question-weight);
  letter-spacing: var(--t-question-track);
  line-height: var(--t-question-lh);
  color: var(--fg-1);
}

.radix-section, h2.radix {
  font-size: var(--t-section-size);
  font-weight: var(--t-section-weight);
  line-height: var(--t-section-lh);
  color: var(--fg-1);
}

.radix-sub, h3.radix {
  font-size: var(--t-sub-size);
  font-weight: var(--t-sub-weight);
  line-height: var(--t-sub-lh);
  color: var(--fg-1);
}

.radix-body, p.radix {
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
}

.radix-label {
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-track);
  line-height: var(--t-label-lh);
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
}

.radix-meta {
  font-size: var(--t-caps-size);
  font-weight: var(--w-light);
  letter-spacing: var(--t-caps-track);
  text-transform: uppercase;
  color: var(--fg-3);
}

.radix-mono, code.radix {
  font-family: var(--font-mono);
  font-size: var(--t-small-size);
  letter-spacing: 0.5px;
  color: var(--fg-3);
}

/* Links */
.radix-link, a.radix {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.radix-link:hover, a.radix:hover { border-bottom-color: var(--accent); }

/* Surfaces */
.radix-glass-light {
  background: var(--glass-light-bg);
  border: var(--glass-light-border);
  border-top-color: var(--glass-light-border-top);
  backdrop-filter: var(--glass-light-blur);
  -webkit-backdrop-filter: var(--glass-light-blur);
  box-shadow: var(--glass-light-shadow);
  border-radius: var(--r-3xl);
}

.radix-glass-dark {
  background: var(--glass-dark-bg);
  border: var(--glass-dark-border);
  border-top-color: var(--glass-dark-border-top);
  backdrop-filter: var(--glass-dark-blur);
  -webkit-backdrop-filter: var(--glass-dark-blur);
  box-shadow: var(--glass-dark-shadow);
  border-radius: var(--r-xl);
}

.radix-glass-aqua {
  background: var(--glass-aqua-bg);
  border: var(--glass-aqua-border);
  border-top-color: var(--glass-aqua-border-top);
  backdrop-filter: var(--glass-aqua-blur);
  -webkit-backdrop-filter: var(--glass-aqua-blur);
  border-radius: var(--r-xl);
}

/* ═══════════════════════════════════════════════════════════
   COMPONENT PATTERNS (product-observed)
   =============================================================== */

/* Top nav pill group */
.radix-nav-pill-group {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
}
.radix-nav-item {
  font-family: var(--font-sans);
  font-size: var(--t-nav-size);
  font-weight: var(--t-nav-weight);
  letter-spacing: var(--t-nav-track);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.radix-nav-item:hover { color: var(--fg-1); }
.radix-nav-item.active {
  color: var(--fg-1);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Status chip (top-right "CONECTADO") */
.radix-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-2);
}
.radix-status-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-live-dot);
  box-shadow: 0 0 0 3px rgba(139,170,173,0.18);
}

/* Buttons */
.radix-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash);
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.radix-btn:hover { background: rgba(139,170,173,0.14); border-color: var(--accent-edge-strong); }
.radix-btn:active { transform: translateY(1px); }
.radix-btn.solid {
  background: var(--radix-nuvem);
  color: var(--radix-petroleo);
  border-color: transparent;
}
.radix-btn.solid:hover { background: var(--radix-white); }
.radix-btn.ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.14);
  color: var(--fg-2);
}
.radix-btn.ghost:hover { color: var(--fg-1); border-color: rgba(255,255,255,0.28); }

/* Section identifier header pattern: [NN] ─── LABEL */
.radix-sid {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.radix-sid-rule {
  flex: 0 0 40px;
  height: 1px;
  background: var(--accent-edge);
}
.radix-sid-label { color: var(--accent); opacity: 0.8; }

/* Accent top-bar — the signature 2px aqua-to-transparent gradient */
.radix-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(139,170,173,0.3) 60%, transparent 100%);
}

/* Ghost logo (watermark) — product background treatment */
.radix-ghost-logo {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  z-index: 0;
}

/* Fine grid overlay — page/section texture */
.radix-grid-texture {
  background-image:
    linear-gradient(rgba(139,170,173,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,170,173,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* Atmospheric vignette — adds depth to flat petroleum bg */
.radix-vignette {
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(62,76,89,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(139,170,173,0.06) 0%, transparent 50%),
    var(--bg-1);
}

/* Bottom action bar (observed in product — glass strip with meta + CTA) */
.radix-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 16px 24px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}

/* Focus states — aqua outline, no glow */
.radix-root :focus-visible,
.radix-btn:focus-visible,
.radix-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}