/* Pasada — shared design tokens and primitives for tripid.app.
   Ported from the app: tripid/src/theme/tokens.ts (Pasada system). */

/* ---- Fonts (self-hosted latin subsets) ---- */
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('/assets/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 700; font-display: swap; src: url('/assets/fonts/fraunces-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('/assets/fonts/dmsans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url('/assets/fonts/dmsans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('/assets/fonts/dmsans-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('/assets/fonts/jbmono-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 800; font-display: swap; src: url('/assets/fonts/jbmono-800.woff2') format('woff2'); }

/* ---- Tokens ---- */
:root {
  --paper: #FBF3E2;
  --paper2: #F5E8CD;
  --page: #FFFDF6;

  --ink: #1A1410;
  --ink2: #5C4A36;
  --ink3: #8B7554;
  --ink4: #D4BE95;
  --rule: rgba(26, 20, 16, 0.10);
  --rule-strong: rgba(26, 20, 16, 0.20);

  --peso: #F5B72C;
  --peso-deep: #C98A0F;
  --peso-soft: #FCE4A6;

  --coral: #E8604C;
  --coral-soft: #F8C9BF;
  --jeep: #2C7A5B;
  --jeep-soft: #BCDCCB;
  --sky: #3A7CA5;
  --sky-soft: #C7DBE8;

  --cockpit: #1E1611;
  --cockpit2: #2A1F16;
  --cockpit-ink: #FBF3E2;
  --cockpit-ink2: rgba(251, 243, 226, 0.7);
  --cockpit-rule: rgba(251, 243, 226, 0.12);

  --display: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r1: 10px; --r2: 16px; --r3: 22px; --r4: 28px;
}

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
a { color: var(--ink); text-decoration-color: var(--peso-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--peso-deep); }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--peso-soft); }

/* ---- Primitives ---- */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
}

.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  border: 2px solid var(--coral);
  border-radius: 6px;
  padding: 4px 10px;
  transform: rotate(-4deg);
}
.stamp--jeep { color: var(--jeep); border-color: var(--jeep); }
.stamp--ink { color: var(--ink); border-color: var(--ink); }

.rule { border: 0; border-top: 1.5px solid var(--rule-strong); }
.rule--dashed { border-top-style: dashed; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: var(--page);
  border: 2px solid var(--ink);
  border-radius: 13px;
  padding: 14px 26px;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-primary {
  background: var(--peso);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); }
.btn-primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-soon {
  background: var(--paper2);
  border-style: dashed;
  color: var(--ink2);
  cursor: default;
}

.paper-card {
  background: var(--page);
  border: 1.5px solid var(--ink);
  border-radius: var(--r2);
  box-shadow: 6px 6px 0 rgba(26, 20, 16, 0.12);
}

/* Receipt zigzag edge: triangles pointing down. Use on a 14px-tall element
   whose color should match the paper ABOVE the edge. */
.receipt-edge {
  height: 14px;
  background:
    linear-gradient(-45deg, transparent 70.7%, currentColor 71%) 0 0 / 14px 100%,
    linear-gradient(45deg, transparent 70.7%, currentColor 71%) 7px 0 / 14px 100%;
}

/* ---- Subpage shell (privacy / terms / methodology) ---- */
.shell { max-width: 740px; margin: 0 auto; padding: 48px 20px 80px; }
.shell-home { display: inline-block; margin-bottom: 28px; font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; }
.shell h1 { font-size: clamp(30px, 6vw, 42px); margin: 10px 0 6px; }
.shell .updated { font-family: var(--mono); font-size: 12px; color: var(--ink3); margin-bottom: 30px; }
.shell article { background: var(--page); border: 1.5px solid var(--ink); border-radius: var(--r2); box-shadow: 6px 6px 0 rgba(26,20,16,0.12); padding: clamp(22px, 5vw, 44px); }
.shell h2 { font-size: 22px; margin: 30px 0 10px; }
.shell h2:first-child { margin-top: 0; }
.shell h3 { font-size: 18px; margin: 22px 0 8px; }
.shell p, .shell li { color: var(--ink2); margin-bottom: 12px; font-size: 16px; }
.shell ul, .shell ol { padding-left: 22px; margin-bottom: 14px; }
.shell footer { margin-top: 34px; font-size: 14px; color: var(--ink3); display: flex; gap: 18px; flex-wrap: wrap; }