/*
 * theme.css — PORTAGE. One ink, one paper ground, no accent colour of any
 * kind — hierarchy is carried by size, weight and space alone. Opens light;
 * the dark set below is the same relationship inverted (light ink on dark
 * paper), not a re-tint.
 */

:root {
  --canvas: #e8e5db;
  --surface: #f5f3ef;
  --surface-2: #ddd9cc;
  --border: #cac5b5;
  --border-strong: #9b9585;
  --ink: #17150f;
  --muted: #55524b;
  --accent: #17150f;
  --accent-hover: #332f26;
  --accent-ink: #f5f3ef;
  --accent-text: #17150f;
  --accent-strong: #17150f;
  --accent-soft: #ddd9cc;
  --accent-border: #9b9585;
  --success: #3f6b3f;
  --success-ink: #f5f3ef;
  --success-soft: #dfe6da;
  --success-strong: #2f4f2f;
  --warning: #8a5a2b;
  --warning-ink: #f5f3ef;
  --warning-soft: #ece2d2;
  --warning-strong: #6b431d;
  --danger: #7a2e22;
  --danger-ink: #f5f3ef;
  --danger-soft: #ecdcd6;
  --danger-strong: #5c211a;
  --chart-1: #17150f;
  --chart-2: #4a463c;
  --chart-3: #726c5c;
  --chart-4: #9b9585;
  --chart-5: #c9c4b4;
  --chart-6: #5a5852;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 2px;
  --radius-card: 4px;
  --radius-input: 2px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --shadow-xs: none;
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 600;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #17150f;
  --surface: #201d16;
  --surface-2: #2a2620;
  --border: #3a362c;
  --border-strong: #55503f;
  --ink: #e8e5db;
  --muted: #a39d8b;
  --accent: #e8e5db;
  --accent-hover: #d4d0c2;
  --accent-ink: #17150f;
  --accent-text: #e8e5db;
  --accent-strong: #e8e5db;
  --accent-soft: #2a2620;
  --accent-border: #55503f;
  --success: #86b280;
  --success-ink: #17150f;
  --success-soft: #223322;
  --success-strong: #a8cda3;
  --warning: #c98f52;
  --warning-ink: #17150f;
  --warning-soft: #3a2c1c;
  --warning-strong: #e0af7c;
  --danger: #c1695a;
  --danger-ink: #17150f;
  --danger-soft: #3a2420;
  --danger-strong: #e0958a;
  --chart-1: #e8e5db;
  --chart-2: #c9c4b4;
  --chart-3: #9b9585;
  --chart-4: #726c5c;
  --chart-5: #4a463c;
  --chart-6: #a19c8c;
}

/*
 * app.css — PORTAGE. The technical-document ground, the diagram's stagger,
 * and the two bespoke devices no primitive covers: the tick-ruled size
 * finder and the reversed field-test band. Tokens only.
 */

body {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 100% 2.75rem, 2.75rem 100%;
  background-position: 0 0;
  background-attachment: local;
}
html[data-theme="dark"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px);
}

/* ---- Construction diagram: the one grid that staggers --------------------
   Rests VISIBLE (a slight offset only) so a visitor whose scroll never
   re-triggers the observer — a resize with no reload, a slow connection —
   still sees the cards, not a blank section. The stagger is a bonus on top. */
.diagram-grid .diagram-item {
  transform: translateY(16px);
}
.diagram-grid.is-inview .diagram-item {
  animation: diagram-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.diagram-grid.is-inview .diagram-item:nth-child(1) { animation-delay: 0ms; }
.diagram-grid.is-inview .diagram-item:nth-child(2) { animation-delay: 60ms; }
.diagram-grid.is-inview .diagram-item:nth-child(3) { animation-delay: 130ms; }
.diagram-grid.is-inview .diagram-item:nth-child(4) { animation-delay: 200ms; }
@keyframes diagram-in {
  from { opacity: 0.4; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Size finder: a measuring tool, not a form card ----------------------- */
.tick-frame {
  position: relative;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  padding-top: 2.25rem;
}
.tick-frame::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0,
    var(--border-strong) 1px,
    transparent 1px,
    transparent 12px
  );
  background-repeat: repeat-x;
  background-position: left top;
}
.tick-frame::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0,
    var(--border-strong) 1.5px,
    transparent 1.5px,
    transparent 60px
  );
  background-repeat: repeat-x;
  background-position: left top;
}

/* ---- Field-test band: full ink ground, reversed paper type ---------------- */
.field-test {
  background: var(--ink);
  color: var(--canvas);
}
.field-test .media {
  height: clamp(260px, 42vw, 480px);
  aspect-ratio: auto;
}
.field-test .caption-row {
  border-top: 1px solid color-mix(in srgb, var(--canvas) 25%, transparent);
  color: color-mix(in srgb, var(--canvas) 72%, transparent);
}

/* ---- Field notes: logbook lines, not cards --------------------------------- */
.logbook + .logbook {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}