/* DrumHide — design tokens */
:root {
  /* Light (paper / rawhide) */
  --paper: #F2E9D8;
  --paper-2: #EADFC8;
  --cream: #E8DCC4;
  --cream-deep: #D9C8A6;
  --ink: #1A1410;
  --ink-soft: #3A2E24;
  --muted: #6B5B48;
  --line: #C8B691;
  --line-soft: #D9C9A8;
  --ember: #8B3A1F;
  --ember-deep: #6E2D18;
  --moss: #5C5A3F;

  /* surfaces */
  --bg: var(--paper);
  --surface: #EFE4CB;
  --surface-2: #E6D8B9;
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --border: var(--line);
  --accent: var(--ember);

  /* type */
  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radii/spacing */
  --r-sm: 2px;
  --r: 4px;
  --r-lg: 8px;

  /* shadow */
  --shadow-sm: 0 1px 0 rgba(26,20,16,0.05), 0 1px 2px rgba(26,20,16,0.04);
  --shadow: 0 2px 12px rgba(26,20,16,0.08), 0 12px 40px rgba(26,20,16,0.06);

  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuNDIgIDAgMCAwIDAgMC4zMiAgMCAwIDAgMCAwLjIgIDAgMCAwIDAuMTIgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}

[data-theme="dark"] {
  /* Camel rawhide */
  --paper: #3B2A1C;
  --paper-2: #4A3525;
  --cream: #5A3D28;
  --cream-deep: #6B4A32;
  --ink: #FDF7E6;
  --ink-soft: #F6EAD0;
  --muted: #E8D4AE;
  --line: #8A6640;
  --line-soft: #6B4A32;
  --ember: #E89270;
  --ember-deep: #D07A55;
  --moss: #BCB890;

  --bg: #2E2015;
  --surface: #3B2A1C;
  --surface-2: #4A3525;
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --border: var(--line);
  --accent: var(--ember);

  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuOTUgIDAgMCAwIDAgMC44NSAgMCAwIDAgMCAwLjY1ICAwIDAgMCAwLjA5IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image: var(--grain);
  background-repeat: repeat;
  transition: background-color .4s ease, color .4s ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Type presets */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.display {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.display-italic {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }

/* container */
.container { max-width: 1380px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1560px; margin: 0 auto; padding: 0 32px; }

/* buttons */
.btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { background: var(--ember); border-color: var(--ember); color: #F9EFDC; }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
}
[data-theme="dark"] .btn-ghost { color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ember { background: var(--ember); border-color: var(--ember); color: #F9EFDC; }
.btn-ember:hover { background: var(--ember-deep); border-color: var(--ember-deep); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--fg-muted);
  background: transparent;
}

/* Divider with stitch */
.stitch {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 0;
}

/* focus */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Texture swatch placeholder (for images we don't have) */
.hide-swatch {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      var(--cream-deep) 0px,
      var(--cream-deep) 2px,
      var(--cream) 2px,
      var(--cream) 16px
    ),
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.25), transparent 60%),
    var(--cream);
  background-blend-mode: multiply, screen, normal;
  color: var(--ink-soft);
}
.hide-swatch::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hide-swatch[data-tone="camel"] {
  background:
    repeating-linear-gradient(
      135deg,
      #9A7148 0px, #9A7148 2px, #B89067 2px, #B89067 16px
    ),
    radial-gradient(120% 80% at 30% 20%, rgba(255,235,200,0.25), transparent 60%),
    #A37C53;
  color: #F4E6C9;
}
.hide-swatch[data-tone="black"] {
  background:
    repeating-linear-gradient(
      135deg,
      #2A201A 0px, #2A201A 2px, #3B2E23 2px, #3B2E23 16px
    ),
    #30241B;
  color: #E8DCC4;
}
.hide-swatch[data-tone="ash"] {
  background:
    repeating-linear-gradient(
      135deg,
      #7A6B53 0px, #7A6B53 2px, #8F8064 2px, #8F8064 16px
    ),
    #84765C;
  color: #F4E6C9;
}
.hide-swatch[data-tone="rust"] {
  background:
    repeating-linear-gradient(
      135deg,
      #8B4B2C 0px, #8B4B2C 2px, #A25A37 2px, #A25A37 16px
    ),
    #97523B;
  color: #F4E6C9;
}
.hide-swatch[data-tone="milk"] {
  background:
    repeating-linear-gradient(
      135deg,
      #EADFC4 0px, #EADFC4 2px, #F4E9CF 2px, #F4E9CF 16px
    ),
    #F0E4CA;
  color: #3A2E24;
}
.hide-swatch .label {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(26,20,16,0.55);
  color: #F4E6C9;
  border-radius: 2px;
  z-index: 2;
}

/* small helpers */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}