/* ============================================================
   Pour Now — Foundations: Colors + Type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ------------------------------------------------------------
   FONT NOTE — placeholder substitutions in use:
   • Headlines: PP Editorial New  →  Newsreader (free Google Font; closest weight-contrast serif)
   • Body:      Satoshi           →  Manrope    (free Google Font; close geometric sans)
   • Data:      JetBrains Mono    →  JetBrains Mono (exact match)
   Replace via @font-face once licensed font files are provided.
   ------------------------------------------------------------ */

:root {
  /* ---------- BRAND COLORS ---------- */
  --pn-naranja: #FF5A4D;     /* Primary accent — Naranja Agria, 60% */
  --pn-selva:   #0E5B3D;     /* Secondary    — Selva, 20% */
  --pn-desierto:#F8BD22;     /* Tertiary     — Desierto, 10% */
  --pn-chela:   #FFF0E0;     /* 5% accent — warm peach. NEVER as page background. */

  /* ---------- INK (no pure black) ---------- */
  --pn-ink:        #1A1614;  /* Headlines + line art */
  --pn-ink-soft:   #3D3733;  /* Body text */
  --pn-ink-muted:  #6B635D;  /* Secondary copy, captions */
  --pn-ink-faint:  #A89E97;  /* Disabled, hints */

  /* ---------- SURFACES ---------- */
  --pn-canvas:     #FDFCFB;  /* Off-white — primary canvas */
  --pn-surface:    #FFFFFF;  /* Cards on canvas */
  --pn-surface-2:  #F2EEE7;  /* Slightly recessed */
  --pn-line:       #E6E1D8;  /* Hairlines */
  --pn-line-strong:#D2CBBF;

  /* ---------- ACCENT TINTS ---------- */
  --pn-naranja-soft: #FFE4DF;
  --pn-naranja-deep: #D14233;
  --pn-selva-soft:   #DDEAE2;
  --pn-selva-deep:   #084028;
  --pn-desierto-soft:#FDEBB8;

  /* ---------- SEMANTIC ---------- */
  --pn-success: var(--pn-selva);
  --pn-warning: var(--pn-desierto);
  --pn-danger:  var(--pn-naranja-deep);
  --pn-info:    var(--pn-selva);

  /* ---------- TYPE FAMILIES ---------- */
  --pn-font-display: 'Newsreader', 'PP Editorial New', 'Playfair Display', Georgia, serif;
  --pn-font-body:    'Manrope', 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pn-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --pn-fs-display: clamp(48px, 7vw, 96px);
  --pn-fs-h1: clamp(40px, 5vw, 64px);
  --pn-fs-h2: clamp(32px, 4vw, 48px);
  --pn-fs-h3: 32px;
  --pn-fs-h4: 24px;
  --pn-fs-h5: 18px;
  --pn-fs-body-lg: 18px;
  --pn-fs-body: 16px;
  --pn-fs-body-sm: 14px;
  --pn-fs-caption: 12px;
  --pn-fs-mono: 13px;

  /* ---------- LINE HEIGHT ---------- */
  --pn-lh-tight: 1.05;
  --pn-lh-snug: 1.2;
  --pn-lh-body: 1.55;
  --pn-lh-loose: 1.75;

  /* ---------- LETTER SPACING ---------- */
  --pn-tracking-tight: -0.025em;
  --pn-tracking-normal: 0;
  --pn-tracking-wide: 0.04em;
  --pn-tracking-mono: -0.01em;

  /* ---------- WEIGHTS ---------- */
  --pn-w-light: 300;
  --pn-w-regular: 400;
  --pn-w-medium: 500;
  --pn-w-semibold: 600;
  --pn-w-bold: 700;

  /* ---------- SPACING (8pt) ---------- */
  --pn-s-1: 4px;
  --pn-s-2: 8px;
  --pn-s-3: 12px;
  --pn-s-4: 16px;
  --pn-s-5: 24px;
  --pn-s-6: 32px;
  --pn-s-7: 48px;
  --pn-s-8: 64px;
  --pn-s-9: 96px;
  --pn-s-10: 128px;

  /* ---------- RADII ---------- */
  --pn-r-xs: 4px;
  --pn-r-sm: 8px;
  --pn-r-md: 12px;   /* buttons */
  --pn-r-lg: 16px;   /* cards */
  --pn-r-xl: 24px;
  --pn-r-pill: 999px;

  /* ---------- SHADOWS (soft, low-spread) ---------- */
  --pn-shadow-xs: 0 1px 2px rgba(26, 22, 20, 0.04);
  --pn-shadow-sm: 0 2px 6px rgba(26, 22, 20, 0.06);
  --pn-shadow-md: 0 6px 20px rgba(26, 22, 20, 0.08);
  --pn-shadow-lg: 0 16px 40px rgba(26, 22, 20, 0.10);
  --pn-shadow-lift: 0 8px 24px rgba(255, 90, 77, 0.18); /* naranja glow on hover */

  /* ---------- LAYOUT ---------- */
  --pn-maxw: 1200px;
  --pn-grid-cols: 12;
  --pn-grid-gutter: 24px;

  /* ---------- MOTION ---------- */
  --pn-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --pn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pn-dur-fast: 150ms;
  --pn-dur: 200ms;
  --pn-dur-slow: 250ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--pn-canvas);
  color: var(--pn-ink-soft);
  font-family: var(--pn-font-body);
  font-size: var(--pn-fs-body);
  line-height: var(--pn-lh-body);
  font-weight: var(--pn-w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .pn-display {
  font-family: var(--pn-font-display);
  color: var(--pn-ink);
  font-weight: var(--pn-w-regular);
  line-height: var(--pn-lh-tight);
  letter-spacing: var(--pn-tracking-tight);
  text-wrap: balance;
  margin: 0;
}
.pn-display { font-size: var(--pn-fs-display); font-weight: var(--pn-w-light); }
h1 { font-size: var(--pn-fs-h1); font-weight: var(--pn-w-light); }
h2 { font-size: var(--pn-fs-h2); font-weight: var(--pn-w-regular); }
h3 { font-size: var(--pn-fs-h3); font-weight: var(--pn-w-regular); line-height: var(--pn-lh-snug); }
h4 { font-size: var(--pn-fs-h4); font-weight: var(--pn-w-medium); line-height: var(--pn-lh-snug); }
h5 { font-size: var(--pn-fs-h5); font-weight: var(--pn-w-medium); font-family: var(--pn-font-body); letter-spacing: 0; }

/* Italic display — used sparingly for editorial emphasis */
.pn-display em, h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: var(--pn-w-regular);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
  max-width: 65ch;
}

a {
  color: var(--pn-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pn-line-strong);
  transition: color var(--pn-dur) var(--pn-ease), text-decoration-color var(--pn-dur) var(--pn-ease);
}
a:hover { color: var(--pn-naranja); text-decoration-color: var(--pn-naranja); }

small, .pn-caption {
  font-size: var(--pn-fs-caption);
  color: var(--pn-ink-muted);
  letter-spacing: var(--pn-tracking-wide);
}

code, pre, kbd, samp, .pn-mono {
  font-family: var(--pn-font-mono);
  font-size: var(--pn-fs-mono);
  letter-spacing: var(--pn-tracking-mono);
}

/* eyebrow / kicker */
.pn-eyebrow {
  font-family: var(--pn-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pn-ink-muted);
  font-weight: var(--pn-w-medium);
}

/* data figure — for stats and metrics */
.pn-figure {
  font-family: var(--pn-font-mono);
  font-size: 48px;
  font-weight: var(--pn-w-medium);
  color: var(--pn-ink);
  letter-spacing: var(--pn-tracking-mono);
}

/* selection */
::selection {
  background: var(--pn-naranja);
  color: #fff;
}