/* =====================================================================
   ESTUDIO CONTABLE AF — Colors & Type
   ---------------------------------------------------------------------
   Brand essence: cercano pero profesional. Tecnología + orden.
   The visual language is built around a stark black/white monogram,
   warmed with an ivory paper tone and a single confident accent.
   ===================================================================== */

/* -----------------------------------------------------------------
   FONTS
   -----------------------------------------------------------------
   Display:  Fraunces fallback → swap if a custom serif is provided.
             Used at LARGE sizes only (display, hero numerals, pull-
             quotes). Conveys advisory weight + editorial calm.
   Body:     Inter — neutral grotesque for UI, body, tables, data.
   Mono:     JetBrains Mono — for figures, ledgers, CUITs, amounts.

   ⚠️ Substitution flag: no custom font files were provided. These
   are Google Fonts placeholders chosen to match the AF logo's
   geometric/confident feel. If the studio has bespoke fonts, drop
   them in /fonts/ and update the @font-face block below.
   ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800;9..144,900&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* =================================================================
     COLOR TOKENS — RAW
     Black-and-white core, warmed with paper tones. The brand's
     identity comes from contrast and restraint, not chroma.
     ================================================================= */

  /* Ink — the foundation. Not pure #000 — slightly warm so it sits
     on paper-cream without feeling clinical. */
  --ink-1000: #0E0E0C;   /* monogram, headlines, primary text */
  --ink-900:  #1A1A17;   /* body text on light */
  --ink-700:  #2E2E2A;   /* secondary text, captions */
  --ink-500:  #6B6B66;   /* muted text, helper copy */
  --ink-300:  #B5B4AE;   /* dividers, disabled */
  --ink-200:  #DAD9D2;   /* hairlines */

  /* Paper — the warm neutral surface. Avoids sterile #FFF. */
  --paper-50:  #FCFBF6;  /* page background */
  --paper-100: #F6F4EB;  /* card/panel */
  --paper-200: #EFEDE2;  /* hover/secondary surface */
  --paper-300: #E4E1D3;  /* sunken/inset */
  --paper-0:   #FFFFFF;  /* pure white — used sparingly, for inputs */

  /* Accent — Verde Balance. A grounded, ledger-green that signals
     positive movement, growth, "saldo a favor". Used sparingly. */
  --accent-700: #1F5A3A;
  --accent-600: #2C7A4E;
  --accent-500: #3B9362;  /* primary accent */
  --accent-300: #A6D2B7;
  --accent-100: #DDEEE3;

  /* Signal — for status, NOT decoration. */
  --signal-positive:  #2C7A4E;  /* income, success, "al día" */
  --signal-warning:   #C28A2C;  /* upcoming deadline */
  --signal-negative:  #B8412E;  /* overdue, error */
  --signal-info:      #2E6FB5;  /* informational */

  /* =================================================================
     SEMANTIC COLOR TOKENS
     Reference these in product code, not the raw tokens above.
     ================================================================= */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-100);
  --bg-surface-2:   var(--paper-200);
  --bg-input:       var(--paper-0);
  --bg-inverse:     var(--ink-1000);

  --fg-1:           var(--ink-1000);  /* primary */
  --fg-2:           var(--ink-700);   /* secondary */
  --fg-3:           var(--ink-500);   /* tertiary / muted */
  --fg-disabled:    var(--ink-300);
  --fg-on-inverse:  var(--paper-50);
  --fg-accent:      var(--accent-600);

  --border-1:       var(--ink-200);   /* hairlines, dividers */
  --border-2:       var(--ink-300);   /* stronger separator */
  --border-strong:  var(--ink-1000);  /* iconic AF-style borders */

  --accent:         var(--accent-600);
  --accent-hover:   var(--accent-700);
  --accent-soft:    var(--accent-100);

  /* =================================================================
     TYPOGRAPHY — RAW
     ================================================================= */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale — minor third (1.2) for body, larger steps for display.
     Built so display sizes feel editorial, body sizes feel calm. */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;
  --text-6xl:  120px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrow caps */

  /* =================================================================
     SPACING / RADIUS / SHADOW / MOTION
     ================================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Shadow — restrained. Editorial design uses borders before shadows.
     Keep these subtle. */
  --shadow-1: 0 1px 0 0 rgba(14, 14, 12, 0.04), 0 1px 2px 0 rgba(14, 14, 12, 0.06);
  --shadow-2: 0 2px 4px -1px rgba(14, 14, 12, 0.06), 0 4px 12px -2px rgba(14, 14, 12, 0.08);
  --shadow-3: 0 8px 24px -4px rgba(14, 14, 12, 0.10), 0 16px 40px -12px rgba(14, 14, 12, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  --motion-fast:    140ms;
  --motion-base:    220ms;
  --motion-slow:    420ms;
  --motion-ease:    cubic-bezier(0.22, 1, 0.36, 1);  /* easeOutQuint — calm, professional */
  --motion-ease-in: cubic-bezier(0.32, 0, 0.67, 0);

  /* Layout */
  --container-max: 1240px;
  --gutter:        24px;
}

/* =====================================================================
   SEMANTIC TYPE — drop-in classes / element styles
   ===================================================================== */

.eyebrow,
[data-type="eyebrow"] {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.display-xl,
[data-type="display-xl"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size:   var(--text-6xl);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.display-lg,
[data-type="display-lg"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size:   var(--text-5xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 96, "SOFT" 50;
}

.display-md,
[data-type="display-md"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:   var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}

.h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size:   var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size:   var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

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

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:   var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

.body-lg,
[data-type="body-lg"] {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
}

.body-sm,
[data-type="body-sm"] {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.caption,
[data-type="caption"] {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size:   var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.mono,
[data-type="mono"],
code, kbd {
  font-family: var(--font-sans);
  font-size:   0.95em;
  font-weight: 500;
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg-1);
}

.figure,
[data-type="figure"] {
  font-family: var(--font-sans);
  font-weight: 500;
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

/* Links — understated, with confident hover. */
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-300);
  transition: text-decoration-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
a:hover {
  text-decoration-color: var(--fg-1);
}