/* =========================================================
   PANAMA RED — Foundations
   Color + type tokens. Source-of-truth for all artifacts.
   ========================================================= */

/* ---- Web fonts (Google Fonts substitutes) -----------------
   The squarespace site uses a high-contrast serif for the
   "RED" mark and a clean sans for body. We approximate with:
   - Playfair Display  → display serif (Didone-ish)
   - DM Serif Display  → ultra-tight headline serif
   - Inter             → body sans
   FLAG: these are GFonts substitutes, not the original
   Squarespace "Trajan Pro" / "Proxima Nova" pairing. Swap in
   licensed font files in /fonts/ when available.
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── BRAND COLOR ─────────────────────────────────────── */
  --pr-red:        #F50537;   /* the wordmark red — hot crimson */
  --pr-red-hot:    #FF1744;   /* slightly punchier hover/active */
  --pr-red-deep:   #C20029;   /* pressed / type-on-light */
  --pr-red-tint:   #FFE5EB;   /* faint pink wash */

  /* ── NEUTRALS — high-contrast editorial ──────────────── */
  --pr-ink:        #0A0A0A;   /* near-black body type */
  --pr-charcoal:   #2A2A2A;   /* secondary text */
  --pr-graphite:   #555555;   /* muted text, captions */
  --pr-stone:      #8C8C8C;   /* placeholder, tertiary */
  --pr-fog:        #C9C9C9;   /* dividers, hairlines */
  --pr-bone:       #EFEDE8;   /* warm off-white panel */
  --pr-paper:      #F7F5F0;   /* page bg variant */
  --pr-snow:       #FFFFFF;   /* primary canvas */

  /* ── SEMANTIC FOREGROUNDS ────────────────────────────── */
  --fg-1:          var(--pr-ink);       /* primary text */
  --fg-2:          var(--pr-charcoal);  /* body */
  --fg-3:          var(--pr-graphite);  /* secondary */
  --fg-mute:       var(--pr-stone);     /* muted */
  --fg-accent:     var(--pr-red);       /* the red */

  /* ── SEMANTIC BACKGROUNDS ────────────────────────────── */
  --bg-page:       var(--pr-snow);      /* default canvas — mostly white */
  --bg-panel:      var(--pr-bone);      /* warm beige break panel */
  --bg-inverse:    var(--pr-ink);       /* dark sections */
  --bg-accent:     var(--pr-red);       /* red blocks */

  /* ── BORDERS / RULES ─────────────────────────────────── */
  --rule-thin:     1px solid var(--pr-fog);
  --rule-bold:     2px solid var(--pr-ink);
  --rule-accent:   2px solid var(--pr-red);

  /* ── TYPE FAMILIES ───────────────────────────────────── */
  --font-display:  "DM Serif Display", "Playfair Display", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-serif:    "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── TYPE SCALE ──────────────────────────────────────── */
  /* The brand voice loves OUTRAGEOUS scale on the display
     serif paired with quiet, tightly-tracked all-caps eyebrows. */
  --fs-mega:       clamp(72px, 12vw, 200px);  /* RED-style mark */
  --fs-display:    clamp(56px, 8vw, 128px);   /* hero headline */
  --fs-h1:         clamp(40px, 5vw, 72px);
  --fs-h2:         clamp(32px, 4vw, 56px);
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-body-lg:    19px;
  --fs-body:       17px;
  --fs-small:      15px;
  --fs-eyebrow:    12px;   /* the "panama" tag, all-caps tracked */
  --fs-micro:      11px;

  --lh-tight:      0.95;
  --lh-snug:       1.15;
  --lh-body:       1.6;
  --lh-loose:      1.8;

  --tr-tight:      -0.02em;
  --tr-normal:     0;
  --tr-eyebrow:    0.32em;   /* the "p a n a m a" letter-spacing */
  --tr-caps:       0.18em;

  /* ── SPACING ─────────────────────────────────────────── */
  --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;
  --sp-11: 192px;

  /* ── RADII ───────────────────────────────────────────── */
  /* The brand is editorial / hard-edged. Radii are minimal. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ── ELEVATION ───────────────────────────────────────── */
  /* Minimal — almost never used. Editorial layouts rely on
     whitespace + rules, not shadows. */
  --shadow-1:  0 1px 2px rgba(10,10,10,0.06);
  --shadow-2:  0 8px 24px rgba(10,10,10,0.08);
  --shadow-3:  0 24px 48px rgba(10,10,10,0.12);

  /* ── MOTION ──────────────────────────────────────────── */
  --ease-std:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

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

.pr-mark {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--pr-red);
  text-transform: uppercase;
  font-weight: 400;
}

.pr-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: lowercase;   /* "p a n a m a" — lowercase tracked */
  color: var(--pr-red);
  font-weight: 400;
}

.pr-eyebrow--caps {
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--fg-1);
}

.pr-display, h1.pr-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  font-weight: 400;
  text-wrap: balance;
}

.pr-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  font-weight: 400;
  text-transform: uppercase;
}

.pr-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  font-weight: 400;
  text-transform: uppercase;
}

.pr-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg-1);
  font-weight: 500;
  font-style: italic;
}

.pr-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg-1);
  font-weight: 600;
}

.pr-body, p.pr-p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.pr-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  font-weight: 300;
  text-wrap: pretty;
}

.pr-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--fg-1);
  text-wrap: balance;
}

.pr-attrib {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.pr-small  { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--fg-3); }
.pr-micro  { font-family: var(--font-sans); font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-mute); }
.pr-mono   { font-family: var(--font-mono); font-size: var(--fs-small); }

/* Accent on the .red span — used to color a single word */
.pr-red    { color: var(--pr-red); }
.pr-italic { font-style: italic; }