/* ============================================================
   PARKS & TRAVEL — Colors + Type Foundations
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Dela Gothic One";
  src: url("./fonts/DelaGothicOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nimbus Sans";
  src: url("./fonts/NimbusSanL-Reg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand core — directly from the logo */
  --pt-black:        #0A0A0A;
  --pt-white:        #FFFFFF;
  --pt-coral:        #FF4438;   /* primary accent (warm "movement" line) */
  --pt-cyan:         #3DECEC;   /* secondary accent (cool "movement" line) */

  /* Coral scale */
  --pt-coral-50:     #FFEDEB;
  --pt-coral-100:    #FFD0CB;
  --pt-coral-200:    #FFA199;
  --pt-coral-300:    #FF7368;
  --pt-coral-400:    #FF4438;   /* = --pt-coral */
  --pt-coral-500:    #E63329;
  --pt-coral-600:    #B82720;
  --pt-coral-700:    #821B16;

  /* Cyan scale */
  --pt-cyan-50:      #E5FCFC;
  --pt-cyan-100:     #BFF8F8;
  --pt-cyan-200:     #8AF2F2;
  --pt-cyan-300:     #5EEEEE;
  --pt-cyan-400:     #3DECEC;   /* = --pt-cyan */
  --pt-cyan-500:     #1FCBCB;
  --pt-cyan-600:     #0E9C9C;
  --pt-cyan-700:     #096969;

  /* Vibrant supporting palette — for tags, categories, illustrations.
     Travel/parks brand benefits from a few extra "playful" colors. */
  --pt-sun:          #FFC93C;   /* sunlight / amusement parks */
  --pt-mango:        #FF8A2B;   /* adventure / warm */
  --pt-grass:        #2BD66A;   /* nature / outdoors */
  --pt-violet:       #7A3CFF;   /* night / culture */

  /* Neutral / grays */
  --pt-ink-900:      #0A0A0A;
  --pt-ink-800:      #1A1A1A;
  --pt-ink-700:      #2B2B2B;
  --pt-ink-600:      #4A4A4A;
  --pt-ink-500:      #707070;
  --pt-ink-400:      #9E9E9E;
  --pt-ink-300:      #C7C7C7;
  --pt-ink-200:      #E5E5E5;
  --pt-ink-100:      #F2F2F2;
  --pt-ink-50:       #F8F8F8;

  /* Semantic surfaces */
  --pt-bg:           var(--pt-white);
  --pt-bg-alt:       var(--pt-ink-50);
  --pt-bg-inverse:   var(--pt-black);
  --pt-surface:      var(--pt-white);
  --pt-surface-alt:  var(--pt-ink-100);
  --pt-border:       var(--pt-ink-200);
  --pt-border-strong:var(--pt-black);

  /* Semantic text */
  --pt-fg:           var(--pt-ink-900);
  --pt-fg-muted:     var(--pt-ink-600);
  --pt-fg-subtle:    var(--pt-ink-500);
  --pt-fg-inverse:   var(--pt-white);
  --pt-fg-accent:    var(--pt-coral);

  /* Status */
  --pt-success:      var(--pt-grass);
  --pt-warning:      var(--pt-sun);
  --pt-danger:       var(--pt-coral-500);
  --pt-info:         var(--pt-cyan-600);

  /* ---------- Type families ---------- */
  --pt-font-display: "Dela Gothic One", "Archivo Black", "Arial Black", sans-serif;
  --pt-font-body:    "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pt-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --pt-fs-display-1: clamp(56px, 9vw, 128px);
  --pt-fs-display-2: clamp(44px, 7vw, 96px);
  --pt-fs-h1:        clamp(40px, 5vw, 72px);
  --pt-fs-h2:        clamp(32px, 4vw, 56px);
  --pt-fs-h3:        clamp(24px, 3vw, 36px);
  --pt-fs-h4:        20px;
  --pt-fs-eyebrow:   13px;
  --pt-fs-body-lg:   18px;
  --pt-fs-body:      16px;
  --pt-fs-body-sm:   14px;
  --pt-fs-caption:   12px;

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

  /* ---------- Radii ---------- */
  --pt-radius-xs: 4px;
  --pt-radius-sm: 8px;
  --pt-radius-md: 14px;
  --pt-radius-lg: 22px;
  --pt-radius-xl: 32px;
  --pt-radius-pill: 999px;
  /* The logo's outer mark is a pill — many cards / hero shapes pick this up */
  --pt-radius-window: 48px;

  /* ---------- Shadows ---------- */
  --pt-shadow-sm:    0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --pt-shadow-md:    0 6px 18px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --pt-shadow-lg:    0 18px 40px rgba(10,10,10,0.12), 0 6px 12px rgba(10,10,10,0.06);
  /* Brand shadow — coral + cyan offset, evokes the logo's chromatic-aberration */
  --pt-shadow-brand: 4px 4px 0 var(--pt-coral), -4px -4px 0 var(--pt-cyan);
  --pt-shadow-brand-sm: 2px 2px 0 var(--pt-coral), -2px -2px 0 var(--pt-cyan);

  /* ---------- Motion ---------- */
  --pt-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --pt-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --pt-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --pt-dur-fast:   140ms;
  --pt-dur-base:   220ms;
  --pt-dur-slow:   420ms;
}

/* ============================================================
   Semantic type elements
   ============================================================ */
.pt-display-1, h1.pt-display, .pt-hero {
  font-family: var(--pt-font-display);
  font-size: var(--pt-fs-display-1);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--pt-fg);
  text-transform: uppercase;
}

.pt-display-2 {
  font-family: var(--pt-font-display);
  font-size: var(--pt-fs-display-2);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pt-h1, h1 {
  font-family: var(--pt-font-display);
  font-size: var(--pt-fs-h1);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--pt-fg);
}

.pt-h2, h2 {
  font-family: var(--pt-font-display);
  font-size: var(--pt-fs-h2);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--pt-fg);
}

.pt-h3, h3 {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-h3);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--pt-fg);
}

.pt-h4, h4 {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-h4);
  line-height: 1.3;
  font-weight: 700;
  color: var(--pt-fg);
}

.pt-eyebrow, .pt-overline {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pt-coral);
}

.pt-body-lg, .pt-lead {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-body-lg);
  line-height: 1.55;
  color: var(--pt-fg);
}

.pt-body, p {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-body);
  line-height: 1.6;
  color: var(--pt-fg);
}

.pt-body-sm {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-body-sm);
  line-height: 1.5;
  color: var(--pt-fg-muted);
}

.pt-caption {
  font-family: var(--pt-font-body);
  font-size: var(--pt-fs-caption);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--pt-fg-subtle);
  text-transform: uppercase;
}

.pt-mono {
  font-family: var(--pt-font-mono);
  font-size: var(--pt-fs-body-sm);
}

/* ============================================================
   Signature effect — chromatic-aberration / "movement"
   Use sparingly on display headlines & the logo mark.
   ============================================================ */
.pt-glitch {
  position: relative;
  display: inline-block;
  color: var(--pt-black);
  text-shadow:
    2px 0 0 var(--pt-coral),
    -2px 0 0 var(--pt-cyan);
}
.pt-glitch--lg {
  text-shadow:
    4px 0 0 var(--pt-coral),
    -4px 0 0 var(--pt-cyan);
}