/*
 * CasaVeritas Design System — Colors & Typography
 * casaveritasreport.com · REVALUE PROPTECH SL
 *
 * Two visual contexts:
 *   1. WEB  — soft warm grey bg, navy/gold accent, Inter sans-serif
 *   2. REPORT — deep navy + gold cover, cream body, wide-tracked uppercase labels
 *
 * Usage: import this file before any component CSS.
 * Google Fonts CDN: Inter (weights 400–900)
 */

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

/* ─── BASE COLOR TOKENS ───────────────────────────────────────── */
:root {
  /* Neutral / Surface */
  --cv-bg:            #f3f4f3;   /* soft warm grey — main page background */
  --cv-bg-alt:        #e8ebe9;   /* slightly darker warm grey — section alt */
  --cv-card:          #fbfbfa;   /* card surface */
  --cv-soft:          #eef0ed;   /* light neutral tint — callout bgs */
  --cv-border:        #d9dedb;   /* neutral warm-grey border */
  --cv-border-strong: #c2c9c5;   /* stronger border / divider */

  /* Text */
  --cv-text:          #1c2d4a;   /* report navy — primary */
  --cv-muted:         #3f4c60;   /* muted navy — secondary text, captions */
  --cv-faint:         #8fa09b;   /* faint — placeholder, disabled */

  /* Brand / Accent (navy + gold) */
  --cv-accent:        #1c2d4a;   /* brand navy — CTA, links, highlights */
  --cv-accent-dark:   #111d30;   /* hover navy */
  --cv-accent-light:  #31465f;   /* lighter navy — active states */
  --cv-accent-bg:     #eef0ed;   /* pale neutral — accent chip bg */

  /* Traffic Light System */
  --cv-green:         #166534;   /* proceed text */
  --cv-green-bg:      #dcfce7;   /* proceed background */
  --cv-amber:         #92400e;   /* negotiate text */
  --cv-amber-bg:      #fef3c7;   /* negotiate background */
  --cv-red:           #9f1239;   /* walk away text */
  --cv-red-bg:        #ffe4e6;   /* walk away background */

  /* Dark surfaces */
  --cv-dark:          #1c2d4a;   /* final CTA dark bg */
  --cv-dark-text:     #e2e5e2;   /* text on dark bg */

  /* Report PDF palette */
  --cv-report-navy:   #1c2d4a;   /* report cover / header bg */
  --cv-report-navy-deep: #111d30; /* deeper navy — cover top half */
  --cv-report-gold:   #c4983a;   /* report gold accent */
  --cv-report-gold-light: #d4aa4a; /* lighter gold hover */
  --cv-report-cream:  #f3f4f3;   /* neutral report content body bg */
  --cv-report-section-header: #1c2d4a; /* report section header navy */
}

/* ─── SEMANTIC SURFACE ALIASES ───────────────────────────────── */
:root {
  --surface-page:     var(--cv-bg);
  --surface-card:     var(--cv-card);
  --surface-callout:  var(--cv-soft);
  --border-default:   var(--cv-border);
  --border-strong:    var(--cv-border-strong);
  --fg1:              var(--cv-text);
  --fg2:              var(--cv-muted);
  --fg3:              var(--cv-faint);
  --link:             var(--cv-accent);
}

/* ─── TYPOGRAPHY TOKENS ──────────────────────────────────────── */
:root {
  /* Font families */
  --font-sans:   'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* Type scale — fluid where appropriate */
  --text-xs:     0.72rem;    /* 11.5px — legal, microcopy */
  --text-sm:     0.875rem;   /* 14px — secondary labels, footer */
  --text-base:   1rem;       /* 16px — body default */
  --text-lg:     1.125rem;   /* 18px — lead paragraph, card text */
  --text-xl:     1.35rem;    /* 21.6px — subheadline */
  --text-2xl:    1.75rem;    /* 28px — section title small */
  --text-3xl:    clamp(2rem, 4vw, 3.2rem);   /* section titles */
  --text-4xl:    clamp(2.7rem, 6vw, 5.4rem); /* hero H1 */

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* Letter spacing */
  --tracking-tight:  -0.065em;  /* hero headlines */
  --tracking-snug:   -0.05em;   /* section titles */
  --tracking-normal: -0.02em;   /* card headers */
  --tracking-wide:   0.08em;    /* tags/badges */
  --tracking-wider:  0.12em;    /* eyebrow labels */
  --tracking-widest: 0.3em;     /* report uppercase labels */

  /* Line heights */
  --leading-none:    0.98;   /* hero H1 */
  --leading-tight:   1.04;   /* section titles */
  --leading-snug:    1.3;    /* card headers */
  --leading-normal:  1.6;    /* body */
  --leading-relaxed: 1.75;   /* long-form body */
}

/* ─── SEMANTIC TYPE STYLES ───────────────────────────────────── */

/* Web eyebrow — "Independent property due diligence in Spain" */
.cv-eyebrow, [data-cv="eyebrow"] {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--cv-accent);
}

/* Hero H1 */
.cv-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--cv-text);
  text-wrap: pretty;
}

/* Section title H2 */
.cv-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--cv-text);
  text-wrap: pretty;
}

/* Card / subsection H3 */
.cv-h3, h3 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--cv-text);
}

/* Lead / subhead */
.cv-subhead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--cv-muted);
}

/* Body */
.cv-body, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--cv-text);
}

/* Small / caption */
.cv-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--cv-muted);
}

/* Microcopy */
.cv-micro {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--cv-muted);
}

/* Report label (wide-tracked uppercase) */
.cv-report-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cv-muted);
}

/* Price / stat display */
.cv-price {
  font-family: var(--font-sans);
  font-size: 4rem;
  font-weight: var(--weight-black);
  letter-spacing: -0.06em;
  color: var(--cv-accent-dark);
}

/* ─── SPACING & SHAPE TOKENS ─────────────────────────────────── */
:root {
  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card:   0 18px 45px rgba(23,33,31,0.045);
  --shadow-hero:   0 24px 70px rgba(23,33,31,0.08);
  --shadow-btn:    0 10px 25px rgba(15,118,110,0.18);

  /* Layout */
  --container-max: 1120px;
  --container-pad: 20px;
}