/*
 * theme.css — HAUL's design-system values.
 *
 * A rugged spec-sheet aesthetic: stamped black type, hairline manifest
 * tables, warm canvas paper and one safety-orange rivet accent (the link
 * colour, --accent-text). Buttons are near-black ink stamps; the wash behind
 * a badge or a highlighted figure carries the orange instead, so the rivet
 * shows up where it should — never everywhere.
 */

:root {
  --canvas: #ede6d5;
  --surface: #f7f4ec;
  --surface-2: #e3dbc5;
  --border: #d9cfb6;
  --border-strong: #b3a688;
  --ink: #16130f;
  --muted: #635f56;

  --accent: #16130f;
  --accent-hover: #322c22;
  --accent-ink: #f7f4ec;
  --accent-text: #a83112;
  --accent-strong: #16130f;
  --accent-soft: color-mix(in srgb, var(--accent-text) 14%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent-text) 45%, var(--border-strong));

  --success: #3f6b2e;
  --success-ink: #f7f4ec;
  --success-soft: #e2e8d4;
  --success-strong: #33531f;
  --warning: #a85a12;
  --warning-ink: #f7f4ec;
  --warning-soft: #f0e0c9;
  --warning-strong: #8a4a0d;
  --danger: #9a2b1f;
  --danger-ink: #f7f4ec;
  --danger-soft: #f0dcd4;
  --danger-strong: #7e2317;

  --chart-1: #a83112;
  --chart-2: #16130f;
  --chart-3: #52632f;
  --chart-4: #8a6a2f;
  --chart-5: #33566b;
  --chart-6: #b3a688;

  --font-display: "Oswald", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 3px;
  --radius-card: 5px;
  --radius-input: 3px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-raised: 4px 4px 0 0 var(--ink);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 600;
  --measure: 66ch;
}

html[data-theme="dark"] {
  --canvas: #17140f;
  --surface: #1f1b14;
  --surface-2: #29241a;
  --border: #3a3324;
  --border-strong: #55492f;
  --ink: #ede6d5;
  --muted: #a89a7d;

  --accent: #d95a1f;
  --accent-hover: #b03d0e;
  --accent-ink: #17140f;
  --accent-text: #e2793f;
  --accent-strong: #ede6d5;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 55%, var(--border-strong));

  --success: #6f9a52;
  --success-ink: #17140f;
  --success-soft: #253321;
  --success-strong: #9dc47c;
  --warning: #d38a3f;
  --warning-ink: #17140f;
  --warning-soft: #3a2b18;
  --warning-strong: #e6ac6c;
  --danger: #c1543f;
  --danger-ink: #17140f;
  --danger-soft: #3a211b;
  --danger-strong: #e08468;

  --chart-1: #e2793f;
  --chart-2: #ede6d5;
  --chart-3: #93a86f;
  --chart-4: #c7a25c;
  --chart-5: #6f9bb3;
  --chart-6: #a89a7d;

  --shadow-raised: 4px 4px 0 0 color-mix(in srgb, var(--ink) 70%, transparent);
}

/*
 * public/app.css — HAUL's own styling: the paper ground, the mobile drawer
 * (the checkbox pattern behavior.js's drawer enhancer expects), the photo
 * tone that ties different photographs into one product line, and the
 * hero's one moment of motion. Everything else is tokens and utilities.
 */

/* ---- The ground: warm canvas paper, not a flat fill ------------------- */
body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-attachment: fixed;
}

/* ---- Mobile nav drawer ------------------------------------------------
   `.navopen` is the hidden checkbox; behavior.js's drawer enhancer closes
   it on a same-page link click or Escape. Pure CSS drives the open state. */
.drawer {
  position: fixed;
  inset: var(--bar-h, 68px) 0 auto 0;
  z-index: var(--z-menu, 40);
  max-height: calc(100vh - var(--bar-h, 68px));
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1.5rem;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease, ease), transform 180ms var(--ease, ease);
}
.navopen:checked ~ .drawer {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .drawer { display: none; }
}

/* ---- Photography: one duotone across five different source photos ----- */
.media img {
  filter: saturate(0.9) sepia(0.08) contrast(1.02);
}

/* ---- Hero, the one place something moves in --------------------------- */
[data-inview] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out, ease), transform 700ms var(--ease-out, ease);
}
[data-inview].is-inview {
  opacity: 1;
  transform: none;
}
[data-inview]:nth-child(2) { transition-delay: 90ms; }

html.reduced-motion [data-inview] {
  opacity: 1;
  transform: none;
  transition: none;
}