/* Walkwater / Creative Labs — shared journal styles */

:root {
  --ink: #1A0A1E;
  --plum: #5B1A6B;
  --lilac: #D4C5E2;
  --mist: #F5F0FA;
  --paper: #FAF7FC;
  --line: rgba(26, 10, 30, 0.12);
  --line-strong: rgba(26, 10, 30, 0.28);
  --muted: rgba(26, 10, 30, 0.62);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--mist);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.display, h1.display, h2.display {
  font-family: 'Urbanist', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
}
.display em, .italic-accent, em.it {
  font-style: italic;
  font-weight: 500;
}

.mono {
  font-family: 'Space Grotesk', monospace;
  font-feature-settings: 'tnum';
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
}

.pill {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s, color .25s, transform .25s;
  font-family: inherit;
}
.pill:hover { background: var(--ink); color: var(--mist); }
.pill.dark { background: var(--ink); color: var(--mist); }
.pill.dark:hover { background: var(--plum); }
.pill .arrow { transition: transform .25s; }
.pill:hover .arrow { transform: translate(2px, -2px); }
.pill.sm { padding: 7px 14px; font-size: 10px; }
.pill.danger { border-color: #b54257; color: #b54257; }
.pill.danger:hover { background: #b54257; color: white; }

.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.5);
  font-family: 'Space Grotesk';
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
}
.tag-pill .dot { width: 6px; height: 6px; background: var(--plum); border-radius: 50%; }

.stripes {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(91,26,107,0.05) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(150deg, var(--lilac) 0%, #BFA9D2 100%);
}
.stripes-soft {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(91,26,107,0.04) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(150deg, #E8DDF1 0%, var(--lilac) 100%);
}