/* ============================================================
   Simeon Woodworks — Brand tokens
   Hand-crafted, rustic Ozark. Paper, ink, oak, forest.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+DW+Pica:ital@0;1&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Special+Elite&family=Caveat:wght@500;700&display=swap');

:root {
  /* ───── Inks & Wood ─────────────────────────────────── */
  --ink:        #1F1408;   /* iron-gall stamp black */
  --ink-soft:   #3A2616;   /* warm sepia ink */
  --bark:       #5C3A1E;   /* dark bark */
  --oak:        #8B5A2B;   /* oak heartwood (primary) */
  --oak-light:  #B0824E;   /* sanded oak */
  --oak-pale:   #D5B58A;   /* highlight wood */

  /* ───── Forest ──────────────────────────────────────── */
  --forest:     #3F5A2E;   /* dark fir */
  --moss:       #6B824B;   /* lichen */
  --sage:       #9CAA7D;   /* dried sage */
  --leaf:       #5C7A3A;   /* oak leaf */

  /* ───── Papers ──────────────────────────────────────── */
  --linen:      #FBF4E3;   /* lightest paper */
  --cream:      #F4E9CF;   /* main paper (poster ground) */
  --parchment:  #ECDEB8;   /* aged parchment */
  --kraft:      #D9C29A;   /* kraft / label stock */
  --kraft-deep: #B89968;   /* shadow paper */

  /* ───── Accents ─────────────────────────────────────── */
  --rust:       #B0612C;   /* rusted iron, leaf-in-fall */
  --ember:      #C77B3D;   /* warmer ember */
  --tin:        #4F5A55;   /* stamped tin gray-green */
  --blood:      #7A2E1B;   /* old-shop red, used sparingly */

  /* ───── Type ────────────────────────────────────────── */
  --font-display: "IM Fell English", "IM Fell DW Pica", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, serif;
  --font-stamp:   "Special Elite", "Courier New", monospace;
  --font-hand:    "Caveat", "Bradley Hand", cursive;

  /* ───── Edges & shadows ─────────────────────────────── */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31,20,8,.08), 0 1px 1px rgba(31,20,8,.06);
  --shadow-md: 0 8px 24px -8px rgba(31,20,8,.25), 0 2px 6px rgba(31,20,8,.08);
  --shadow-paper: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.04) inset, 0 6px 18px -10px rgba(31,20,8,.3);
}

/* ───── Paper background helper (used on artboards) ───── */
.sw-paper {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(176,130,78,.08), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.16 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--cream);
  color: var(--ink);
}

.sw-paper-linen {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    var(--linen);
  color: var(--ink);
}

.sw-paper-kraft {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' seed='2'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.1 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    var(--kraft);
  color: var(--ink);
}

.sw-paper-dark {
  background:
    radial-gradient(1000px 500px at 30% 0%, rgba(139,90,43,.15), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 0.35 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    #2A1B0E;
  color: var(--cream);
}

/* ───── Tree-ring SVG mark used a lot ────────────────── */
.sw-ring-bg {
  background-image: radial-gradient(circle at center,
    transparent 0,
    transparent 12%,
    rgba(92,58,30,.08) 12%, rgba(92,58,30,.08) 12.6%,
    transparent 12.6%, transparent 22%,
    rgba(92,58,30,.1) 22%, rgba(92,58,30,.1) 22.5%,
    transparent 22.5%, transparent 36%,
    rgba(92,58,30,.07) 36%, rgba(92,58,30,.07) 36.5%,
    transparent 36.5%, transparent 50%,
    rgba(92,58,30,.08) 50%, rgba(92,58,30,.08) 50.5%,
    transparent 50.5%);
}

/* ───── Wood-grain divider ───────────────────────────── */
.sw-grain-rule {
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 4px,
      rgba(92,58,30,.18) 4px 5px,
      transparent 5px 11px,
      rgba(92,58,30,.1) 11px 12px,
      transparent 12px 26px,
      rgba(92,58,30,.22) 26px 27px,
      transparent 27px 40px);
  border-top: 1px solid rgba(92,58,30,.25);
  border-bottom: 1px solid rgba(92,58,30,.15);
}

/* ───── Stamped label ────────────────────────────────── */
.sw-label-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kraft);
  color: var(--ink-soft);
  font-family: var(--font-stamp);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  border: 1.5px solid rgba(92,58,30,.55);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(0,0,0,.06);
}

/* ───── Inked button (primary) ───────────────────────── */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-stamp);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 22px 10px;
  background: var(--ink);
  color: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
  box-shadow: 2px 2px 0 rgba(31,20,8,.18);
  /* Inline `width: 100%` callers must not overflow their padding box. */
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
}
.sw-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(31,20,8,.22); }
.sw-btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 rgba(31,20,8,.18); }

.sw-btn--oak  { background: var(--oak); border-color: var(--bark); color: var(--linen); }
.sw-btn--ghost{ background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.sw-btn--ghost:hover { background: rgba(31,20,8,.05); box-shadow: none; transform: none; }

/* ───── Stamped circular seal ────────────────────────── */
.sw-stamp {
  width: 86px; height: 86px; border-radius: 50%;
  border: 2px solid var(--bark);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stamp);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bark);
  text-align: center;
  line-height: 1.15;
  position: relative;
  transform: rotate(-6deg);
}
.sw-stamp::before {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px dashed rgba(92,58,30,.4); border-radius: 50%;
}

/* ───── Sketched/torn paper edge ─────────────────────── */
.sw-torn {
  --c: var(--kraft);
  background: var(--c);
  -webkit-mask:
    radial-gradient(8px at 50% 100%, transparent 98%, #000 100%) bottom/16px 8px repeat-x,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-out;
  mask:
    radial-gradient(8px at 50% 100%, transparent 98%, #000 100%) bottom/16px 8px repeat-x,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Generic util */
.sw-hand { font-family: var(--font-hand); }
.sw-stamp-text { font-family: var(--font-stamp); letter-spacing: .08em; text-transform: uppercase; }
.sw-display { font-family: var(--font-display); }
.sw-body { font-family: var(--font-body); }