/* Clarifyed.ai - Shared design tokens */
:root {
  /* Base palette */
  --cream: #F5EFE6;
  --cream-warm: #EFE7DA;
  --cream-deep: #E8DECF;
  --ink: #1A1814;
  --ink-soft: #3A352D;
  --ink-muted: #6B6258;
  --paper: #FBF7F0;

  /* Accents */
  --coral: #F97316;
  --coral-deep: #C2410C;
  --coral-soft: #FDBA74;
  --sage: #7A9E7E;
  --sage-soft: #BFD4B8;
  --sky: #6FA8C9;
  --sky-soft: #BBD4E2;
  --butter: #E8C566;
  --butter-soft: #F5E2A8;
  --plum: #8E6E8B;

  /* Type */
  --serif: "Fraunces", "Tiempos", "GT Sectra", Georgia, serif;
  --serif-display: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --hand: "Caveat", "Kalam", cursive;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Shared utilities */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--coral);
  color: #fff;
}
.btn-primary:hover { background: var(--coral-deep); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

.btn-dark {
  background: var(--ink);
  color: var(--cream);
}

/* Hand-drawn underline */
.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'><path d='M2 5 Q 15 1, 30 4 T 60 4 T 90 4 T 118 4' fill='none' stroke='%23F97316' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 0.3em;
  padding-bottom: 0.1em;
}