/* =========================================================================
   VIZTA — Colors & Type tokens
   PropTech / AI broker assistant. Iberian real estate (Lisbon, Madrid).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR — RAW PALETTE ----------
     Warm, editorial PropTech. Ink + bone + terracotta + sage.            */

  /* Ink — deep near-black with a warm cast. Primary text and surfaces.   */
  --ink-1000: #0F0E0C;
  --ink-900:  #1A1814;
  --ink-800:  #29261F;
  --ink-700:  #3D382F;
  --ink-600:  #5A5347;
  --ink-500:  #7A7367;
  --ink-400:  #9C9587;
  --ink-300:  #C2BCB0;
  --ink-200:  #E0DCD2;
  --ink-100:  #EDE9DF;

  /* Bone — warm off-whites. The default surface tone, never pure white.  */
  --bone-50:  #FBF8F2;
  --bone-100: #F6F2EA;
  --bone-200: #EFEADE;
  --bone-300: #E5DECE;

  /* Terra — Lisbon rooftop accent. Use sparingly: CTAs, key marks.       */
  --terra-700: #8C3A1F;
  --terra-600: #B0492A;
  --terra-500: #C85A35;
  --terra-400: #D97757;
  --terra-300: #E69A7E;
  --terra-200: #F0BFAB;
  --terra-100: #F8E1D4;

  /* Sage — calm secondary. Grounds data, supports terra.                  */
  --sage-700:  #3F5043;
  --sage-600:  #556B5A;
  --sage-500:  #708472;
  --sage-400:  #8FA391;
  --sage-300:  #B6C4B7;
  --sage-200:  #D7DFD7;
  --sage-100:  #E8EDE7;

  /* Signal — semantic colors. Tuned to sit naturally on bone.            */
  --signal-success: #2F6F4F;
  --signal-warning: #B07A1A;
  --signal-danger:  #A23A2E;
  --signal-info:    #2A5A8A;

  /* ---------- COLOR — SEMANTIC TOKENS ---------- */

  /* Foreground */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary text, body when long */
  --fg-3: var(--ink-500);   /* tertiary, captions, meta */
  --fg-4: var(--ink-400);   /* placeholder, disabled */
  --fg-on-dark:    var(--bone-50);
  --fg-on-accent:  var(--bone-50);

  /* Background / surface */
  --bg-page:    var(--bone-100);
  --bg-surface: var(--bone-50);
  --bg-raised:  #FFFFFF;
  --bg-sunken:  var(--bone-200);
  --bg-inverse: var(--ink-1000);

  /* Border */
  --border-subtle:  rgba(15, 14, 12, 0.06);
  --border-default: rgba(15, 14, 12, 0.10);
  --border-strong:  rgba(15, 14, 12, 0.18);
  --border-focus:   var(--terra-500);

  /* Accent */
  --accent:        var(--terra-500);
  --accent-hover:  var(--terra-600);
  --accent-press:  var(--terra-700);
  --accent-soft:   var(--terra-100);

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE — SCALE (1.200 minor third) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.14em;

  /* ---------- SPACING (4pt grid) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS — soft, warm (no neutral grey) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 14, 12, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 14, 12, 0.06), 0 1px 2px rgba(15, 14, 12, 0.04);
  --shadow-md: 0 8px 20px rgba(15, 14, 12, 0.08), 0 2px 6px rgba(15, 14, 12, 0.04);
  --shadow-lg: 0 24px 48px rgba(15, 14, 12, 0.10), 0 4px 12px rgba(15, 14, 12, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(15, 14, 12, 0.06);

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

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply when a project opts in: <body class="vizta">
   ========================================================================= */

.vizta {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.vizta h1, .vizta .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.vizta h2, .vizta .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.vizta h3, .vizta .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.vizta h4, .vizta .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.vizta h5, .vizta .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.vizta h6, .vizta .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.vizta p, .vizta .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.vizta .lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.vizta .eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.vizta .caption,
.vizta small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.vizta code,
.vizta .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
}

.vizta .display-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.vizta a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.vizta a:hover { text-decoration-color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--ink-1000); }