/* =========================================================
   Jimena Pretara — Design System Tokens
   Coach de vida y estratega de acción
   "No ordeno para exigirte. Ordeno para sostenerte."
   ========================================================= */

/* --- Webfonts (Google Fonts substitution — see README) ----- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  /* ---------- Color Palette ---------- */
  --jp-paper:       #F6F2EA;  /* warm paper / canvas background */
  --jp-paper-soft:  #FBF8F2;  /* lightest tint, surface lift */
  --jp-bone:        #EFE9DC;  /* aged paper, secondary surface */
  --jp-grey-warm:   #D2D2D2;  /* warm light grey — dividers, soft fills */
  --jp-grey-50:     #E6E2D8;  /* subtle paper shadow */
  --jp-grey-200:    #BDB9B0;  /* muted divider */
  --jp-grey-graph:  #6B6B6B;  /* graphite grey, secondary text */
  --jp-ink:         #2B2724;  /* soft black — body text (warm, not pure) */
  --jp-ink-soft:    #4A433D;  /* secondary ink */

  --jp-red:         #B22C2C;  /* rojo profundo — underlines, accents */
  --jp-red-soft:    #C8504D;  /* hover / pressed lighter red */
  --jp-yellow:      #F2D976;  /* amarillo resaltador — highlight only */
  --jp-yellow-soft: #FAEBB1;  /* secondary highlight wash */

  /* ---------- Semantic ---------- */
  --jp-bg:          var(--jp-paper);
  --jp-fg:          var(--jp-ink);
  --jp-fg-muted:    var(--jp-grey-graph);
  --jp-fg-soft:     var(--jp-ink-soft);
  --jp-accent:      var(--jp-red);
  --jp-highlight:   var(--jp-yellow);
  --jp-rule:        var(--jp-grey-200);

  /* ---------- Typography ---------- */
  --jp-serif:  "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jp-sans:   "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jp-mono:   "Courier Prime", "Courier New", ui-monospace, monospace;

  /* ---------- Type scale (editorial / generous) ---------- */
  --jp-fs-display:  clamp(2.75rem, 6vw, 4.5rem);   /* hero */
  --jp-fs-h1:       clamp(2.25rem, 4.5vw, 3.25rem);
  --jp-fs-h2:       clamp(1.75rem, 3vw, 2.25rem);
  --jp-fs-h3:       1.5rem;     /* 24px */
  --jp-fs-h4:       1.25rem;    /* 20px */
  --jp-fs-lead:     1.1875rem;  /* 19px */
  --jp-fs-body:     1rem;       /* 16px */
  --jp-fs-small:    0.875rem;   /* 14px */
  --jp-fs-eyebrow:  0.75rem;    /* 12px, uppercase tracked */

  --jp-lh-tight:    1.1;
  --jp-lh-display:  1.05;
  --jp-lh-body:     1.65;
  --jp-lh-prose:    1.75;

  --jp-tracking-eyebrow: 0.18em;
  --jp-tracking-caps:    0.08em;

  /* ---------- Spacing (8pt-ish, paper-margin generous) ---------- */
  --jp-s-1:  4px;
  --jp-s-2:  8px;
  --jp-s-3:  12px;
  --jp-s-4:  16px;
  --jp-s-5:  24px;
  --jp-s-6:  32px;
  --jp-s-7:  48px;
  --jp-s-8:  64px;
  --jp-s-9:  96px;
  --jp-s-10: 128px;

  /* ---------- Radii (mostly soft / minimal) ---------- */
  --jp-radius-xs:   2px;
  --jp-radius-sm:   4px;
  --jp-radius-md:   8px;
  --jp-radius-lg:   16px;
  --jp-radius-pill: 999px;
  --jp-radius-circle: 50%;   /* used for highlight covers */

  /* ---------- Shadows (paper, very soft) ---------- */
  --jp-shadow-paper:
    0 1px 1px rgba(43, 39, 36, 0.04),
    0 4px 12px rgba(43, 39, 36, 0.06);
  --jp-shadow-lift:
    0 2px 4px rgba(43, 39, 36, 0.05),
    0 18px 40px -12px rgba(43, 39, 36, 0.18);
  --jp-shadow-note:
    0 1px 0 rgba(43, 39, 36, 0.05),
    0 8px 22px -10px rgba(43, 39, 36, 0.22);

  /* ---------- Borders ---------- */
  --jp-border-hair:  1px solid var(--jp-grey-200);
  --jp-border-soft:  1px solid rgba(43, 39, 36, 0.10);
  --jp-border-ink:   1.5px solid var(--jp-ink);

  /* ---------- Motion ---------- */
  --jp-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --jp-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --jp-dur-fast:    160ms;
  --jp-dur-base:    240ms;
  --jp-dur-slow:    420ms;
}

/* =========================================================
   Base / element styles
   ========================================================= */

html, body {
  background: var(--jp-bg);
  color: var(--jp-fg);
  font-family: var(--jp-sans);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Playfair, editorial, slightly italic-friendly */
h1, .jp-h1 {
  font-family: var(--jp-serif);
  font-weight: 500;
  font-size: var(--jp-fs-h1);
  line-height: var(--jp-lh-display);
  letter-spacing: -0.01em;
  color: var(--jp-fg);
  text-wrap: balance;
}
h2, .jp-h2 {
  font-family: var(--jp-serif);
  font-weight: 500;
  font-size: var(--jp-fs-h2);
  line-height: var(--jp-lh-tight);
  letter-spacing: -0.005em;
  color: var(--jp-fg);
  text-wrap: balance;
}
h3, .jp-h3 {
  font-family: var(--jp-serif);
  font-weight: 500;
  font-size: var(--jp-fs-h3);
  line-height: 1.25;
  color: var(--jp-fg);
}
h4, .jp-h4 {
  font-family: var(--jp-sans);
  font-weight: 600;
  font-size: var(--jp-fs-h4);
  line-height: 1.35;
  color: var(--jp-fg);
}

.jp-display {
  font-family: var(--jp-serif);
  font-weight: 500;
  font-size: var(--jp-fs-display);
  line-height: var(--jp-lh-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.jp-quote {
  font-family: var(--jp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  color: var(--jp-fg);
}

p, .jp-body {
  font-family: var(--jp-sans);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-prose);
  color: var(--jp-fg-soft);
  text-wrap: pretty;
}

.jp-lead {
  font-family: var(--jp-sans);
  font-size: var(--jp-fs-lead);
  line-height: 1.55;
  color: var(--jp-fg);
  font-weight: 400;
}

.jp-eyebrow {
  font-family: var(--jp-sans);
  font-size: var(--jp-fs-eyebrow);
  letter-spacing: var(--jp-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--jp-fg-muted);
}

.jp-small {
  font-size: var(--jp-fs-small);
  color: var(--jp-fg-muted);
}

.jp-mono {
  font-family: var(--jp-mono);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

a {
  color: var(--jp-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--jp-fg);
  transition: color var(--jp-dur-fast) var(--jp-ease),
              border-color var(--jp-dur-fast) var(--jp-ease);
}
a:hover { color: var(--jp-red); border-color: var(--jp-red); }

/* =========================================================
   Brand expressive utilities — the visual signature
   ========================================================= */

/* Hand-drawn red underline under a key word */
.jp-underline {
  background-image: linear-gradient(
    to right,
    var(--jp-red) 0,
    var(--jp-red) 100%
  );
  background-position: 0 92%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  padding-bottom: 1px;
}

/* Slightly hand-drawn / wavy underline using SVG data uri */
.jp-underline-hand {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M2 5 C 18 1, 32 7, 50 4 S 86 7, 118 3' stroke='%23B22C2C' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.45em;
  padding-bottom: 0.18em;
}

/* Yellow highlighter behind a phrase */
.jp-highlight {
  background-image: linear-gradient(
    180deg,
    transparent 55%,
    var(--jp-yellow) 55%,
    var(--jp-yellow) 92%,
    transparent 92%
  );
  padding: 0 0.12em;
}
.jp-highlight-full {
  background: var(--jp-yellow);
  padding: 0.05em 0.25em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Strikethrough with hand-drawn red line */
.jp-strike {
  position: relative;
  color: var(--jp-fg-muted);
}
.jp-strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 55%;
  height: 2px;
  background: var(--jp-red);
  transform: rotate(-1.2deg);
}

/* Red circle around a highlight word */
.jp-circle {
  position: relative;
  display: inline-block;
  padding: 0.05em 0.45em;
}
.jp-circle::before {
  content: "";
  position: absolute;
  inset: -6% -8%;
  border: 1.5px solid var(--jp-red);
  border-radius: 50%;
  transform: rotate(-2deg);
  pointer-events: none;
}

/* Margin "note" — small typewriter aside */
.jp-margin-note {
  font-family: var(--jp-mono);
  font-size: 0.85rem;
  color: var(--jp-fg-muted);
  letter-spacing: 0.01em;
  line-height: 1.45;
}

/* Paper card surface */
.jp-card {
  background: var(--jp-paper-soft);
  border: var(--jp-border-soft);
  border-radius: var(--jp-radius-md);
  box-shadow: var(--jp-shadow-paper);
  padding: var(--jp-s-6);
}

/* Subtle paper texture (CSS-only) */
.jp-paper-texture {
  background-color: var(--jp-paper);
  background-image:
    radial-gradient(rgba(43, 39, 36, 0.035) 1px, transparent 1px),
    radial-gradient(rgba(43, 39, 36, 0.025) 1px, transparent 1px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 6px 7px;
}

/* Buttons */
.jp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--jp-s-2);
  font-family: var(--jp-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: var(--jp-radius-pill);
  border: 1.5px solid var(--jp-ink);
  background: var(--jp-ink);
  color: var(--jp-paper);
  cursor: pointer;
  transition: background var(--jp-dur-base) var(--jp-ease),
              color var(--jp-dur-base) var(--jp-ease),
              transform var(--jp-dur-fast) var(--jp-ease);
  text-decoration: none;
}
.jp-btn:hover { background: var(--jp-red); border-color: var(--jp-red); color: var(--jp-paper); }
.jp-btn:active { transform: translateY(1px); }

.jp-btn--ghost {
  background: transparent;
  color: var(--jp-ink);
}
.jp-btn--ghost:hover { background: var(--jp-ink); color: var(--jp-paper); }

.jp-btn--accent {
  background: var(--jp-red);
  border-color: var(--jp-red);
  color: var(--jp-paper);
}
.jp-btn--accent:hover { background: var(--jp-ink); border-color: var(--jp-ink); }