/* toolcrate.dev design system — "workshop stencil"
   Loaded after each page's own <style> block, so these rules win on equal
   specificity by source order (no !important needed for the CSS custom
   properties every page already renders through). The goal: stop looking
   like the default teal-on-black / rounded-pill / symmetric-card-grid
   template every AI tool builder converges on, and instead lean into the
   one asset the site already has and ignores everywhere but the logo -
   the wooden crate mark (warm wood tones, stamped corners, hand-built). */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* --- Palette: warm kraft/wood instead of cold dark-SaaS teal-on-black --- */
:root {
  --bg: #171009;
  --panel: #211809;
  --panel-2: #2a1f11;
  --line: rgba(240, 214, 170, 0.14);
  --text: #f1e4cf;
  --text-dim: #a8977e;
  --accent: #e0a458;
  --accent-ink: #241505;
  --heading: #fbf1e2;
  --accent-rgba-35: rgba(224, 164, 88, 0.35);
  --accent-rgba-08: rgba(224, 164, 88, 0.08);
  --bad: #ef7a68;
  --good: #8fd694;
  --stamp: #d0603f;
}
:root[data-theme="light"] {
  --bg: #f2e9d7;
  --panel: #fffaf0;
  --panel-2: #f8efdc;
  --line: rgba(63, 41, 17, 0.16);
  --text: #241a0d;
  --text-dim: #7c6a51;
  --accent: #a8501f;
  --accent-ink: #fff6ea;
  --heading: #1c1408;
  --accent-rgba-35: rgba(168, 80, 31, 0.35);
  --accent-rgba-08: rgba(168, 80, 31, 0.08);
  --bad: #ad3320;
  --good: #3f7d3a;
  --stamp: #8a2f1c;
}

/* --- Grain: a thin film-grain layer under everything, never touching
   contrast - the cheapest, most-cited "this wasn't machine-generated"
   signal that costs nothing to add. */
body {
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Header: a plank-seam hairline instead of a plain flat rule --- */
.site-header {
  position: relative;
  border-bottom-style: solid;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 16px);
}

/* --- Badge: a stamped stencil tag instead of a rounded pill --- */
.badge {
  font-family: 'Special Elite', 'Space Grotesk', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem !important;
  border-radius: 2px !important;
  border: 1px dashed var(--stamp) !important;
  background: transparent !important;
  color: var(--stamp) !important;
  transform: rotate(-1deg);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line);
}

/* --- Sharper, "printed label" corners instead of default-rounded-everything --- */
button, input, select, textarea,
.card, .result, .result > div, .file-item, .status,
.dropzone, .payoff-order, table, #pctTable td, #pctTable th {
  border-radius: 3px !important;
}
button.primary, .support a.button, .result a, footer a {
  border-radius: 3px !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.theme-toggle {
  border-radius: 4px !important;
}

/* --- Exposed structure: dashed tear-line instead of a plain solid rule --- */
.support {
  border-top-style: dashed !important;
}

/* --- Hub cards: break the "six identical tiles" symmetry with a touch of
   hand-placed imperfection + small corner marks echoing the crate logo's
   corner bolts. */
.card {
  position: relative;
}
.card:nth-child(4n+1) { transform: rotate(-0.5deg); }
.card:nth-child(4n+2) { transform: rotate(0.35deg); }
.card:nth-child(4n+3) { transform: rotate(-0.2deg); }
.card:hover { transform: rotate(0deg) translateY(-1px); }
.card::before, .card::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  background: var(--line);
  pointer-events: none;
}
.card::before { top: 5px; left: 5px; }
.card::after { bottom: 5px; right: 5px; }

/* --- Footer/nav tag links get a whisper of the stencil treatment too --- */
.site-header .all-tools {
  font-family: 'Special Elite', 'Space Grotesk', monospace;
  letter-spacing: 0.04em;
}