/* ============================================================
   The Passport — Design Foundations
   Dark luxury rebrand. Colors, type, spacing, radii, motion.
   ============================================================ */

/* Literata — loaded via <link> in index.html (non-blocking) */
/* Switzer — sans body (self-hosted) */
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Switzer-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Switzer-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Switzer-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Switzer-Bold.woff2") format("woff2");
}

:root {
  /* ---------- Color tokens ---------- */
  --np-night:        #0C0C0E;  /* Page background — rich black */
  --np-surface:      #1A1A1F;  /* Cards, elevated surfaces */
  --np-surface-alt:  #141417;  /* Subtle alternating section bg */
  --np-ivory:        #F2F0ED;  /* Primary text — warm ivory */
  --np-stone:        #ADA8A3;  /* Secondary text, muted — 5:1 contrast on night for WCAG AA */
  --np-gold:         #C9A96E;  /* Primary accent — champagne gold */
  --np-gold-light:   #E4C88A;  /* Hover / active gold */
  --np-gold-dim:     rgba(201, 169, 110, 0.15);  /* Ghost gold borders */
  --np-error:        #E59A99;  /* Form error text — ~5:1 on surface for WCAG AA */
  --np-border:       rgba(255, 255, 255, 0.06);  /* Barely-there borders */
  --np-border-hover: rgba(255, 255, 255, 0.12);  /* Border on hover */

  /* ---------- Semantic aliases ---------- */
  --np-bg:           var(--np-night);
  --np-bg-elevated:  var(--np-surface);
  --np-fg:           var(--np-ivory);
  --np-fg-muted:     var(--np-stone);
  --np-accent:       var(--np-gold);
  --np-accent-hover: var(--np-gold-light);

  /* ---------- Typography ---------- */
  --np-font-serif: "Literata", "Georgia", serif;
  --np-font-sans:  "Switzer", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Display sizes — fluid clamp for headings, fixed for body */
  --np-text-display-xl: clamp(3.5rem, 7vw, 7rem);      /* Hero — dramatic */
  --np-text-display-l:  clamp(2rem, 4vw, 3.25rem);      /* Section headings */
  --np-text-display-m:  clamp(1.375rem, 2vw, 1.75rem);  /* Sub-headings */
  --np-text-body-l:     1.0625rem;                       /* Lead paragraphs */
  --np-text-body:       0.9375rem;                       /* Default body — 15px */
  --np-text-body-s:     0.8125rem;                       /* Captions, notes */
  --np-text-eyebrow:    0.6875rem;                       /* Labels */
  --np-text-button:     0.8125rem;                       /* CTAs */

  /* Weights — honest mapping to available files */
  --np-weight-regular:  400;
  --np-weight-medium:   500;
  --np-weight-semibold: 600;
  --np-weight-bold:     700;

  /* Line height — slightly more generous for light-on-dark readability */
  --np-lh-display-xl: 1.0;
  --np-lh-display-l:  1.1;
  --np-lh-display-m:  1.25;
  --np-lh-body-l:     1.75;
  --np-lh-body:       1.75;
  --np-lh-body-s:     1.6;
  --np-lh-eyebrow:    1.4;
  --np-lh-button:     1;

  /* Letter spacing */
  --np-tracking-display-xl: -0.025em;  /* Tighter on huge display */
  --np-tracking-display-l:  -0.015em;
  --np-tracking-display-m:  -0.01em;
  --np-tracking-body:        0.015em;  /* Slightly open for sans readability */
  --np-tracking-eyebrow:     0.14em;   /* Tightened from 0.2em — was too fragmented */

  /* ---------- Spacing scale (4px base) ---------- */
  --np-space-1:  4px;
  --np-space-2:  8px;
  --np-space-3:  12px;
  --np-space-4:  16px;
  --np-space-5:  24px;
  --np-space-6:  32px;
  --np-space-7:  48px;
  --np-space-8:  64px;
  --np-space-9:  96px;
  --np-space-10: 128px;
  --np-space-11: 160px;

  /* Section padding */
  --np-section-pad-y:       clamp(80px, 12vw, 180px);
  --np-section-pad-y-tight: clamp(64px, 8vw, 120px);
  --np-card-pad:            clamp(24px, 3vw, 40px);

  /* ---------- Layout ---------- */
  --np-content-max: 1080px;
  --np-gutter:      24px;

  /* ---------- Radii ---------- */
  --np-radius-button: 0;
  --np-radius-card:   4px;
  --np-radius-input:  0;

  /* ---------- Borders ---------- */
  --np-hairline: 1px solid var(--np-border);
  --np-gold-line: 1px solid var(--np-gold-dim);

  /* ---------- Motion ---------- */
  --np-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --np-ease-silk:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --np-dur-fast:     180ms;
  --np-dur-base:     400ms;
  --np-dur-slow:     800ms;
  --np-dur-reveal:   1200ms;
  --np-fade-up-y:    20px;
}

/* ============================================================
   Typographic classes
   ============================================================ */

.np-display-xl,
.np-h1 {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-display-xl);
  line-height: var(--np-lh-display-xl);
  letter-spacing: var(--np-tracking-display-xl);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--np-fg);
  margin: 0;
}

.np-display-l,
.np-h2 {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-display-l);
  line-height: var(--np-lh-display-l);
  letter-spacing: var(--np-tracking-display-l);
  font-kerning: normal;
  color: var(--np-fg);
  margin: 0;
}

.np-display-m,
.np-h3 {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-display-m);
  line-height: var(--np-lh-display-m);
  letter-spacing: var(--np-tracking-display-m);
  font-kerning: normal;
  color: var(--np-fg);
  margin: 0;
}

.np-body-l,
.np-lead {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-body-l);
  line-height: var(--np-lh-body-l);
  letter-spacing: var(--np-tracking-body);
  color: var(--np-fg-muted);
  margin: 0;
}

.np-body,
.np-p {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-body);
  line-height: var(--np-lh-body);
  letter-spacing: var(--np-tracking-body);
  color: var(--np-fg-muted);
  margin: 0;
}

.np-body-s,
.np-caption {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-body-s);
  line-height: var(--np-lh-body-s);
  color: var(--np-fg-muted);
  margin: 0;
}

.np-eyebrow {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-semibold);
  font-size: var(--np-text-eyebrow);
  line-height: var(--np-lh-eyebrow);
  letter-spacing: var(--np-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--np-gold);
  margin: 0;
}

/* Inline link */
.np-link {
  color: var(--np-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--np-gold-dim);
  transition: border-color var(--np-dur-fast) var(--np-ease-out),
              color      var(--np-dur-fast) var(--np-ease-out);
}
.np-link:hover { border-bottom-color: var(--np-gold); color: var(--np-gold-light); }

/* Gold text accent */
.np-gold { color: var(--np-gold); }

/* ============================================================
   Page baseline
   ============================================================ */

.np-page {
  background: var(--np-bg);
  color: var(--np-fg);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-body);
  line-height: var(--np-lh-body);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.np-container {
  width: 100%;
  max-width: var(--np-content-max);
  margin-inline: auto;
  padding-inline: var(--np-gutter);
}