/* ============================================================
   TICO PLUNGE — Design System · Foundations
   Colors + Typography tokens (base + semantic)
   Premium wellness / recovery / longevity · Costa Rica
   ============================================================ */

/* ---------- FONTS ----------
   SINGLE typeface system. Apple-SF-inspired UI sans → we use the native
   system stack so the real San Francisco renders on Apple devices, with
   Albert Sans as the cross-platform fallback (load in each HTML file):
     @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300..700&display=swap');
   Quiet, human, highly legible. NO serif, NO italic emphasis, NO colour
   emphasis inside headlines — distinction comes from weight, size, spacing
   and hierarchy only (think Apple Health / WHOOP, not editorial luxury).
   NOTE: "SF Pro Display" is substituted by the system font + Albert Sans —
   see README → flagged substitution.
*/

:root {
  /* ============ BASE PALETTE ============ */

  /* Dark / ink scale — deep, cinematic, premium */
  --tp-obsidian:   #0B0C0D;  /* deepest — hero & full-bleed dark sections */
  --tp-ink:        #1D1D1B;  /* brand black — primary dark surface        */
  --tp-ink-soft:   #2A2A28;  /* raised dark surface / cards on dark        */
  --tp-graphite:   #54534F;  /* muted text on light                        */

  /* Warm paper / light scale */
  --tp-paper:      #F5F2EB;  /* warm white — primary light surface         */
  --tp-paper-warm: #ECE7DB;  /* secondary light surface / section break    */
  --tp-cream:      #E3DCCB;  /* tinted panels                              */
  --tp-sand:       #CDBFA6;  /* natural wood-tone accent                   */

  /* Brand blue (ice) — the signature accent */
  --tp-deep:       #103753;  /* deep navy — logo, depth                    */
  --tp-ice:        #245E87;  /* primary brand blue                         */
  --tp-ice-bright: #4A8AB8;  /* lighter blue — links / accents on dark     */
  --tp-frost:      #A9C6DC;  /* pale blue tint — subtle washes             */

  /* Borgoña / Ember — warm cinematic ramp drawn from the recovery-room
     red-light photography. Burgundy stays the anchor; ember→amber extend it
     for atmospheric sections, glows and hover accents on dark. Same warm hue
     family — never used for body copy, only as deliberate accent + lighting. */
  --tp-burgundy-deep: #4A1D1D;  /* deepest borgoña — ember section ground   */
  --tp-burgundy:   #6B2C2C;     /* brand borgoña                            */
  --tp-ember:      #94352A;     /* ember red — warm accent on dark          */
  --tp-clay:       #B85C3C;     /* terracotta — mid warm accent / links     */
  --tp-amber:      #D9924A;     /* amber glow — brightest warm highlight     */
  --tp-amber-soft: #E7B583;     /* pale amber tint — washes on dark          */

  /* Functional lines / shadows on light */
  --tp-line:        rgba(29, 29, 27, 0.10);
  --tp-line-strong: rgba(29, 29, 27, 0.28);
  /* on dark */
  --tp-line-dark:        rgba(245, 242, 235, 0.12);
  --tp-line-dark-strong: rgba(245, 242, 235, 0.24);

  /* Elevation — soft, diffuse, never harsh (Apple register) */
  --tp-shadow-xs: 0 1px 2px rgba(16, 55, 83, 0.06);
  --tp-shadow-sm: 0 4px 16px -6px rgba(16, 55, 83, 0.12);
  --tp-shadow-md: 0 14px 40px -12px rgba(16, 55, 83, 0.20);
  --tp-shadow-lg: 0 30px 80px -20px rgba(16, 55, 83, 0.35);

  /* Radii — restrained; product feels engineered, not bubbly */
  --tp-r-xs: 4px;
  --tp-r-sm: 8px;
  --tp-r-md: 14px;
  --tp-r-lg: 22px;
  --tp-r-pill: 100px;

  /* Spacing scale (8pt base, with editorial steps) */
  --tp-s-1: 4px;
  --tp-s-2: 8px;
  --tp-s-3: 12px;
  --tp-s-4: 16px;
  --tp-s-5: 24px;
  --tp-s-6: 32px;
  --tp-s-7: 48px;
  --tp-s-8: 64px;
  --tp-s-9: 96px;
  --tp-s-10: 128px;

  /* Motion — calm, confident easing. Apple-style. Never bouncy. */
  --tp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tp-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --tp-dur-fast: 0.2s;
  --tp-dur: 0.4s;
  --tp-dur-slow: 0.9s;

  /* ============ TYPE FAMILIES ============ */
  --tp-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Helvetica Neue", "Albert Sans", system-ui, sans-serif;
  /* SINGLE typeface system. The serif token below is RETIRED (kept only so any legacy
     reference resolves) — do not use it: headlines, body and quotes all use --tp-sans. */
  --tp-serif: 'The Seasons', 'Fraunces', Georgia, serif;

  /* ============ SEMANTIC TOKENS (light context = default) ============ */
  --bg:        var(--tp-paper);
  --bg-warm:   var(--tp-paper-warm);
  --surface:   #FFFFFF;
  --fg:        var(--tp-ink);
  --fg-muted:  var(--tp-graphite);
  --fg-faint:  rgba(29, 29, 27, 0.55);
  --accent:    var(--tp-ice);
  --accent-ink:var(--tp-deep);
  --border:    var(--tp-line);
  --border-strong: var(--tp-line-strong);
}

/* Dark context — apply .on-dark (or use inside dark sections) */
.on-dark {
  --bg:       var(--tp-ink);
  --bg-warm:  var(--tp-ink-soft);
  --surface:  var(--tp-ink-soft);
  --fg:       var(--tp-paper);
  --fg-muted: rgba(245, 242, 235, 0.72);
  --fg-faint: rgba(245, 242, 235, 0.50);
  --accent:   var(--tp-ice-bright);
  --accent-ink: var(--tp-frost);
  --border:   var(--tp-line-dark);
  --border-strong: var(--tp-line-dark-strong);
}

/* ============================================================
   TYPE SCALE — Apple-grade hierarchy
   Hero & display use light weights + tight tracking.
   Body stays highly legible at regular weight.
   ============================================================ */

.tp-display {            /* hero headline — clean, warm, contemporary */
  font-family: var(--tp-sans);
  font-weight: 500;
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1.07;
  letter-spacing: -0.02em;
}

.tp-h1 {
  font-family: var(--tp-sans);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tp-h2 {
  font-family: var(--tp-sans);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.016em;
}

.tp-h3 {
  font-family: var(--tp-sans);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.26;
  letter-spacing: -0.008em;
}

.tp-lead {               /* large intro paragraph */
  font-family: var(--tp-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

.tp-body {
  font-family: var(--tp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.006em;
}

.tp-small {
  font-family: var(--tp-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--fg-muted);
}

.tp-eyebrow {            /* uppercase label with hairline */
  font-family: var(--tp-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.tp-quote {              /* pull-quote — clean sans, calm & legible */
  font-family: var(--tp-sans);
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.012em;
}

.tp-serif-em {           /* DEPRECATED emphasis device. The system now uses a SINGLE
                            typeface and creates distinction through weight, hierarchy and
                            spacing only — no italics, no colour emphasis inside headlines.
                            Kept as a no-op so older markup degrades to plain text. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

.tp-num {                /* tabular numerals — pricing, stats */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}