/* ============================================================
   Finanzas Remote — Foundations (color + type)
   Brand by Cristóbal Morales Vera (Asesor Financiero, CNV 2711)
   ============================================================ */

/* ---------- Fonts ---------- */
/* Display + headings: Montserrat (closest match to the ALL-CAPS
   geometric sans used on logo and banner).
   Body: Inter / Montserrat depending on density.
   Editorial accent: Cormorant Garamond (serif) – optional, used
   sparingly for pull-quotes and numbers, evokes the "wealth"
   feel without leaving the modern geometric register. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- Brand palette (sampled from logo + banner) ---------- */
  --fr-teal-900: #0b2f30;      /* deepest — backgrounds, ink on teal */
  --fr-teal-800: #134647;      /* dark circle in logo, primary dark */
  --fr-teal-700: #1a5f60;
  --fr-teal-600: #1a7a7a;      /* banner background */
  --fr-teal-500: #0c7e7e;      /* signature teal — logo mid circle */
  --fr-teal-400: #3a9898;
  --fr-teal-300: #7cb8b8;
  --fr-teal-200: #c3dddd;
  --fr-teal-100: #e6f0f0;

  --fr-sand-700: #7d6b44;
  --fr-sand-600: #9b8758;
  --fr-sand-500: #bda879;      /* banner beige blob */
  --fr-sand-400: #bfac8b;      /* logo top circle */
  --fr-sand-300: #d4c5a4;
  --fr-sand-200: #e6dcc3;
  --fr-sand-100: #f3ede0;

  --fr-ink-900: #1a1a1c;
  --fr-ink-800: #232325;       /* FINANZAS text */
  --fr-ink-700: #3a3a3d;
  --fr-ink-600: #555557;       /* "C" gray in logo */
  --fr-ink-500: #6f6f72;
  --fr-ink-400: #939395;
  --fr-ink-300: #bdbdc0;
  --fr-ink-200: #e1e1e3;
  --fr-ink-100: #efeff1;
  --fr-ink-050: #f7f7f5;       /* paper background */
  --fr-white:   #ffffff;

  /* Semantic color */
  --fr-success: #2f8f5f;
  --fr-warning: #c79a2a;
  --fr-danger:  #b84a3c;
  --fr-info:    var(--fr-teal-500);

  /* Zone colors for the "Radiografía Financiera" diagnostic */
  --fr-zone-red:     #b84a3c;
  --fr-zone-yellow:  #c79a2a;
  --fr-zone-green:   #2f8f5f;
  --fr-zone-premium: var(--fr-teal-500);

  /* ---------- Aliases (foreground / background / border) ---------- */
  --fr-bg:        var(--fr-ink-050);
  --fr-bg-paper: #ffffff;
  --fr-bg-dark:   var(--fr-teal-800);
  --fr-bg-teal:   var(--fr-teal-600);
  --fr-bg-sand:   var(--fr-sand-100);

  --fr-fg-1:      var(--fr-ink-800);       /* primary text */
  --fr-fg-2:      var(--fr-ink-600);       /* secondary text */
  --fr-fg-3:      var(--fr-ink-400);       /* tertiary text */
  --fr-fg-onteal: #ffffff;
  --fr-fg-brand:  var(--fr-teal-500);

  --fr-border-1:  var(--fr-ink-200);
  --fr-border-2:  var(--fr-ink-300);
  --fr-border-strong: var(--fr-ink-700);

  /* ---------- Type families ---------- */
  --fr-font-display: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fr-font-sans:    'Inter', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --fr-font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fr-font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Type scale ----------
     Modular scale ~1.2 (major third-ish) on a 16px base.
     Display sizes use tight tracking + uppercase. */
  --fr-text-xs:  12px;
  --fr-text-sm:  14px;
  --fr-text-base: 16px;
  --fr-text-md:  18px;
  --fr-text-lg:  20px;
  --fr-text-xl:  24px;
  --fr-text-2xl: 30px;
  --fr-text-3xl: 36px;
  --fr-text-4xl: 48px;
  --fr-text-5xl: 60px;
  --fr-text-6xl: 76px;

  --fr-leading-tight:  1.12;
  --fr-leading-snug:   1.25;
  --fr-leading-normal: 1.5;
  --fr-leading-loose:  1.7;

  --fr-tracking-tight:   -0.01em;
  --fr-tracking-normal:  0;
  --fr-tracking-wide:    0.04em;
  --fr-tracking-eyebrow: 0.14em;  /* ALL-CAPS labels, eyebrows */
  --fr-tracking-logo:    0.22em;  /* "FINANZAS · PERSONALES" treatment */

  /* ---------- Spacing (4-based) ---------- */
  --fr-s-0: 0;
  --fr-s-1: 4px;
  --fr-s-2: 8px;
  --fr-s-3: 12px;
  --fr-s-4: 16px;
  --fr-s-5: 24px;
  --fr-s-6: 32px;
  --fr-s-7: 48px;
  --fr-s-8: 64px;
  --fr-s-9: 96px;
  --fr-s-10: 128px;

  /* ---------- Radii ---------- */
  --fr-radius-xs: 2px;
  --fr-radius-sm: 6px;
  --fr-radius-md: 10px;    /* default for cards */
  --fr-radius-lg: 16px;
  --fr-radius-xl: 24px;
  --fr-radius-pill: 999px;
  --fr-radius-circle: 50%;

  /* ---------- Elevation ---------- */
  --fr-shadow-xs: 0 1px 2px rgba(19, 70, 71, 0.06);
  --fr-shadow-sm: 0 2px 6px rgba(19, 70, 71, 0.08);
  --fr-shadow-md: 0 8px 20px rgba(19, 70, 71, 0.10);
  --fr-shadow-lg: 0 20px 40px rgba(19, 70, 71, 0.14);
  --fr-shadow-ring: 0 0 0 3px rgba(12, 126, 126, 0.25);

  /* Motion */
  --fr-ease:         cubic-bezier(0.22, 0.8, 0.32, 1);
  --fr-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --fr-dur-fast:     120ms;
  --fr-dur-base:     220ms;
  --fr-dur-slow:     420ms;
}

/* ==========================================================
   Semantic element styles
   ========================================================== */
html, body {
  background: var(--fr-bg);
  color: var(--fr-fg-1);
  font-family: var(--fr-font-sans);
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fr-eyebrow {
  font-family: var(--fr-font-display);
  font-weight: 600;
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fr-fg-brand);
}

.fr-h1, h1.fr {
  font-family: var(--fr-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, var(--fr-text-5xl));
  line-height: var(--fr-leading-tight);
  letter-spacing: var(--fr-tracking-tight);
  color: var(--fr-fg-1);
  text-wrap: balance;
}

.fr-h2, h2.fr {
  font-family: var(--fr-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, var(--fr-text-4xl));
  line-height: var(--fr-leading-snug);
  letter-spacing: var(--fr-tracking-tight);
  color: var(--fr-fg-1);
}

.fr-h3, h3.fr {
  font-family: var(--fr-font-display);
  font-weight: 600;
  font-size: var(--fr-text-2xl);
  line-height: var(--fr-leading-snug);
  color: var(--fr-fg-1);
}

.fr-h4, h4.fr {
  font-family: var(--fr-font-display);
  font-weight: 600;
  font-size: var(--fr-text-xl);
  line-height: var(--fr-leading-snug);
  color: var(--fr-fg-1);
}

/* The "wordmark" treatment — matches the tight ALL-CAPS
   two-line stack under the logo symbol. */
.fr-wordmark {
  font-family: var(--fr-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--fr-tracking-logo);
  color: var(--fr-ink-800);
}

.fr-body, p.fr {
  font-family: var(--fr-font-sans);
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-normal);
  color: var(--fr-fg-1);
  text-wrap: pretty;
}

.fr-body-sm { font-size: var(--fr-text-sm); color: var(--fr-fg-2); }
.fr-body-lg { font-size: var(--fr-text-md); line-height: 1.6; }

.fr-lede {
  font-family: var(--fr-font-sans);
  font-size: var(--fr-text-lg);
  line-height: 1.55;
  color: var(--fr-fg-2);
  max-width: 62ch;
}

.fr-pullquote {
  font-family: var(--fr-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fr-text-3xl);
  line-height: 1.3;
  color: var(--fr-teal-800);
}

.fr-figure {
  font-family: var(--fr-font-serif);
  font-weight: 500;
  font-feature-settings: "lnum", "tnum";
  font-size: var(--fr-text-4xl);
  line-height: 1;
  color: var(--fr-teal-500);
}

.fr-label {
  font-family: var(--fr-font-display);
  font-weight: 600;
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fr-fg-2);
}

.fr-mono {
  font-family: var(--fr-font-mono);
  font-size: 0.95em;
  color: var(--fr-fg-2);
}

/* Links */
a.fr, .fr a {
  color: var(--fr-teal-500);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 126, 126, 0.35);
  transition: color var(--fr-dur-fast) var(--fr-ease),
              border-color var(--fr-dur-fast) var(--fr-ease);
}
a.fr:hover, .fr a:hover { color: var(--fr-teal-800); border-bottom-color: var(--fr-teal-800); }