/* LOCAL AMENDMENT — the design-system export imports these from
   fonts.googleapis.com, which put a third-party request on every visit to the
   corporate site. Same faces, served from our own origin. Re-add this line after
   any re-sync from project 11d8ff9a, which will overwrite this file. */
@import './fonts.css';

@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';
@import './tokens/elevation.css';
@import './tokens/motion.css';
/* LOCAL AMENDMENT — not from the Claude Design export. Re-add this line after any
   re-sync from project 11d8ff9a, which will overwrite this file. See the file header. */
@import './tokens/amendments.css';

/* ── Base ── */
body {
  background: var(--pt-surface-page);
  color: var(--pt-text-default);
  font-family: var(--pt-font-body);
  font-size: var(--pt-text-body);
  line-height: var(--pt-leading-normal);
  letter-spacing: var(--pt-track-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pt-gold-700); text-decoration: none; transition: color var(--pt-dur-fast) var(--pt-ease); }
a:hover { color: var(--pt-gold); }

/* ── Type utilities ── */

/* The instrument label — field labels, table headers, metadata. */
.pt-instrument {
  font: var(--pt-weight-medium) var(--pt-text-instrument)/1.2 var(--pt-font-mono);
  letter-spacing: var(--pt-track-instrument);
  text-transform: uppercase;
  color: var(--pt-text-muted);
}
.pt-instrument-gold { color: var(--pt-gold); }

.pt-display { font: var(--pt-weight-bold) var(--pt-text-display)/var(--pt-leading-tight) var(--pt-font-display); letter-spacing: var(--pt-track-display); color: var(--pt-navy); }
.pt-h1 { font: var(--pt-weight-bold) var(--pt-text-h1)/var(--pt-leading-tight) var(--pt-font-display); letter-spacing: var(--pt-track-display); color: var(--pt-navy); }
.pt-h2 { font: var(--pt-weight-semi) var(--pt-text-h2)/var(--pt-leading-snug) var(--pt-font-display); letter-spacing: var(--pt-track-heading); color: var(--pt-navy); }
.pt-h3 { font: var(--pt-weight-semi) var(--pt-text-h3)/var(--pt-leading-snug) var(--pt-font-display); letter-spacing: var(--pt-track-heading); color: var(--pt-navy); }
.pt-body { font: var(--pt-weight-normal) var(--pt-text-body)/var(--pt-leading-relaxed) var(--pt-font-body); color: var(--pt-text-default); max-width: var(--pt-measure); text-wrap: pretty; }
.pt-lede { font: var(--pt-weight-normal) var(--pt-text-lg)/var(--pt-leading-relaxed) var(--pt-font-body); color: var(--pt-text-secondary); max-width: var(--pt-measure); text-wrap: pretty; }
.pt-caption { font: var(--pt-weight-normal) var(--pt-text-label)/var(--pt-leading-normal) var(--pt-font-body); color: var(--pt-text-muted); }

/* ALL data sets in mono with tabular figures — French sizes, dwell days,
   lot numbers, MRNs, timestamps. */
.pt-data {
  font: var(--pt-weight-medium) var(--pt-text-sm)/1.4 var(--pt-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  color: var(--pt-navy);
}
.pt-data-lg { font-size: var(--pt-text-lg); }
.pt-data-sm { font-size: var(--pt-text-label); }
.pt-figure {
  font: var(--pt-weight-bold) var(--pt-text-h1)/1 var(--pt-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.02em;
  color: var(--pt-navy);
}

/* ── Surfaces ── */
.pt-section { padding: var(--pt-section-y) var(--pt-section-x); }
.pt-container { max-width: var(--pt-container); margin: 0 auto; }
.pt-band-navy { background: var(--pt-navy); color: var(--pt-on-navy-1); }
.pt-panel { background: var(--pt-surface-card); border: var(--pt-hairline); border-radius: var(--pt-radius); }

/* ── Signature devices — one of each per screen, maximum ── */

/* 1. The gold hairline. Anchors the single most important card in a view. */
.pt-anchor { border-top: var(--pt-hairline-gold); }

/* 2. The corner notch. Echoes the blade taper on the piton. */
.pt-notch { clip-path: polygon(0 0, calc(100% - var(--pt-notch)) 0, 100% var(--pt-notch), 100% 100%, 0 100%); }
.pt-notch-lg { clip-path: polygon(0 0, calc(100% - var(--pt-notch-lg)) 0, 100% var(--pt-notch-lg), 100% 100%, 0 100%); }

/* ── Focus — always gold ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--pt-focus-ring);
}