/* Shared design tokens for Fury CRM landing variations */
:root {
  --paper: #FAFAF7;
  --ink: #0E0E0C;
  --ink-2: #2A2A26;
  --mute: #6B6A63;
  --line: #E6E5DE;
  --line-2: #D4D3CB;
  --fury: #E5481E;        /* fury orange-red */
  --fury-deep: #B8330F;
  --ember: #F5A623;
  --green: #2F7A3E;
}

* { box-sizing: border-box; }

.fury-art {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.011em;
}

.fury-art .serif { font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.02em; }
.fury-art .mono  { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

.fury-art h1, .fury-art h2, .fury-art h3 { margin: 0; font-weight: 500; letter-spacing: -0.025em; }
.fury-art p { margin: 0; }

.fury-art a { color: inherit; text-decoration: none; }
.fury-art button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* utility: subtle ruled hairline */
.hairline { background: var(--line); height: 1px; width: 100%; }

/* tag */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: rgba(255,255,255,0.6);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fury); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 500; font-size: 15px;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn-primary {
  background: var(--ink); color: var(--paper);
}
.btn-primary:hover { background: var(--fury); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn .arrow {
  display: inline-block; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8h9M8 4l4 4-4 4" stroke="black" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8h9M8 4l4 4-4 4" stroke="black" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* placeholder image with diagonal stripes */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(14,14,12,0.04) 0 1px, transparent 1px 12px),
    var(--paper);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--mute);
  letter-spacing: 0.06em; text-transform: uppercase;
}