/* ============================================================
   MACA — Design Tokens
   Liquidez sobre facturas | Brand v1.0
   ============================================================ */

/* Playfair Display: brand serif, self-hosted. Variable font covers wght 400–900 upright + italic. */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Montserrat: brand sans, self-hosted. Variable font covers wght 100–900 in upright + italic. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color · Verdes corporativos ---------- */
  --maca-green-primary: #30544D;   /* Verde Primario — brand anchor, 50% of palette */
  --maca-green-mid:     #395C56;   /* Verde Medio */
  --maca-green-light:   #54706B;   /* Verde Claro */

  /* ---------- Color · Neutros (grises de contraste) ---------- */
  --maca-gray-mid:      #828786;
  --maca-gray-light:    #D7D7D7;

  /* ---------- Color · Cream / off-white background ---------- */
  --maca-cream:         #F8F6F3;   /* paper, light surfaces, light-bg illustrations */
  --maca-white:         #FFFFFF;

  /* ---------- Semantic foreground / background ---------- */
  --bg:                 var(--maca-cream);
  --bg-alt:             #FFFFFF;
  --bg-inverse:         var(--maca-green-primary);
  --bg-muted:           var(--maca-gray-light);

  --fg:                 var(--maca-green-primary);
  --fg-muted:           var(--maca-gray-mid);
  --fg-on-dark:         var(--maca-cream);
  --fg-on-dark-muted:   var(--maca-gray-light);

  --border:             var(--maca-gray-light);
  --border-strong:      var(--maca-gray-mid);
  --border-on-dark:     rgba(248, 246, 243, 0.15);

  --accent:             var(--maca-green-primary);
  --accent-hover:       var(--maca-green-mid);
  --accent-pressed:     #264340;     /* a touch darker than primary */

  /* No saturated reds/oranges/blues by brand rule. Use neutrals + tone. */

  /* ---------- Type families ---------- */
  --font-serif:         'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:          'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---------- Type scale (matches the manual: H1 32 / H2 24 / H3 18 / Body 16-18 / Caption 14) ---------- */
  --fs-h1:    32px;
  --fs-h2:    24px;
  --fs-h3:    18px;
  --fs-body:  16px;
  --fs-body-lg: 18px;
  --fs-caption: 14px;
  --fs-label: 14px;

  /* Display sizes for marketing / hero (extend the scale; institutional restraint) */
  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 44px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing — used for the wide-tracked headers seen in the manual ("M A N U A L  D E  M A R C A") */
  --tracking-wide:  0.18em;
  --tracking-mid:   0.08em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---------- Spacing — 4px base ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Radius — restrained / institutional, no pill-soft over-rounding ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;   /* used only for badges/tags, not buttons by default */

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;   /* matches icon stroke (1.5–2px) */

  /* ---------- Shadows — soft, paper-like. No glow, no neon. ---------- */
  --shadow-xs: 0 1px 2px rgba(48, 84, 77, 0.05);
  --shadow-sm: 0 2px 6px rgba(48, 84, 77, 0.06), 0 1px 2px rgba(48, 84, 77, 0.04);
  --shadow-md: 0 8px 24px rgba(48, 84, 77, 0.08), 0 2px 6px rgba(48, 84, 77, 0.04);
  --shadow-lg: 0 24px 48px rgba(48, 84, 77, 0.12), 0 4px 12px rgba(48, 84, 77, 0.06);

  /* Overlay for full-bleed photography (manual specifies 40–60%) */
  --overlay-photo-strong: rgba(48, 84, 77, 0.60);
  --overlay-photo-mid:    rgba(48, 84, 77, 0.45);
  --overlay-photo-soft:   rgba(48, 84, 77, 0.25);

  /* Line-art ornament opacity (manual: 8–15% max) */
  --ornament-opacity-min: 0.08;
  --ornament-opacity-mid: 0.12;
  --ornament-opacity-max: 0.15;

  /* Easing */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   Base / element defaults
   ============================================================ */
html {
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

/* ---------- Headings — Playfair Display, institutional ---------- */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

/* Display variants for marketing surfaces */
.display-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-display-xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-regular);
}
.display-lg {
  font-family: var(--font-serif);
  font-size: var(--fs-display-lg);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-regular);
}
.display-md {
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-regular);
}

/* ---------- Body ---------- */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

/* ---------- Caption / Label ---------- */
.caption, figcaption, small {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--fg);
}

/* ---------- Eyebrow / wide-tracked overline (very on-brand) ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Link ---------- */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

/* ---------- Code / mono — rare in this brand, but provided for completeness ---------- */
code, kbd, pre {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ---------- Utility surfaces ---------- */
.surface-dark {
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3,
.surface-dark p, .surface-dark .body { color: var(--fg-on-dark); }
.surface-dark .caption { color: var(--fg-on-dark-muted); }
.surface-dark a { color: var(--fg-on-dark); }

.surface-cream { background: var(--bg); color: var(--fg); }
.surface-paper { background: var(--bg-alt); color: var(--fg); }