/* ============================================================
   PAWKET — shared design tokens
   Locked palette + three-voice type system from the brand guide
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Palette — locked */
  --forest:      #3D5A3C;
  --forest-dark: #2A3F2A;
  --forest-deep: #20301F;
  --clay:        #D97644;
  --clay-dark:   #B85A2E;
  --teal:        #6DA89E;
  --teal-dark:   #3F726A;
  --cream:       #F5EFE3;
  --cream-dark:  #E8DFC9;
  --paper:       #FBF7EE;
  --ink:         #1E1D1A;

  /* Type */
  --sans:  'Bricolage Grotesque', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ---- Eyebrow / mono label ---- */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 12px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 15px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-clay   { background: var(--clay);   color: var(--cream); }
.btn-clay:hover   { background: var(--clay-dark); }
.btn-forest { background: var(--forest); color: var(--cream); }
.btn-forest:hover { background: var(--forest-dark); }
.btn-ghost  { background: transparent; border-color: currentColor; }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---- The locked paw mark ---- */
.paw { display: block; color: var(--forest); }
.paw svg { display: block; width: 100%; height: 100%; }

/* ---- Image placeholder ---- */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--cream-dark);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent, transparent 9px,
    rgba(30,29,26,.045) 9px, rgba(30,29,26,.045) 18px
  );
  display: flex;
  align-items: flex-end;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
  margin: 14px;
  padding: 5px 9px;
  background: rgba(245,239,227,.7);
  border: 1px solid rgba(30,29,26,.12);
  border-radius: 4px;
}
/* dark-on placeholder variant for use over forest/clay panels */
.ph--dark {
  background-color: rgba(0,0,0,.18);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent, transparent 9px,
    rgba(255,255,255,.06) 9px, rgba(255,255,255,.06) 18px
  );
}
.ph--dark .ph__tag {
  color: var(--cream);
  opacity: .8;
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.18);
}