@import "tailwindcss";

@theme {
  --color-ink: #0a0a0a;
  --color-paper: #f4f4f0;
  --color-cream: #ebe9e1;
  --color-soul: #e02d00;      /* CP red-orange */
  --color-soul-deep: #b52300;
  --color-sky: #1e73be;       /* CP accent blue */
  --color-mist: #8a8a85;
  --color-line: #d9d7ce;
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --radius-blob: 2rem;
}

:root { color-scheme: light; }

html { scroll-behavior: smooth; }
body {
  @apply bg-paper text-ink font-sans antialiased;
  font-feature-settings: "ss01", "kern";
}

::selection { background: var(--color-soul); color: white; }

@layer components {
/* Editorial type scale */
.display { font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; }
.headline { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 500; }
.eyebrow { @apply text-[11px] uppercase tracking-[0.18em] font-medium text-mist; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* The red "highlight" block from the CP site */
.mark { background: var(--color-soul); color: white; padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark-ink { background: var(--color-ink); color: white; padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.card { @apply bg-white border border-line rounded-2xl; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); border-color: var(--color-ink); }

.btn { @apply inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium transition-colors whitespace-nowrap; }
.btn-soul { @apply bg-soul text-white hover:bg-soul-deep; }
.btn-ink { @apply bg-ink text-white hover:bg-soul; }
.btn-ghost { @apply border border-ink/20 hover:border-ink; }

.chip { @apply inline-flex items-center rounded-full border border-line bg-white px-3 py-1 text-xs font-medium; }
.chip-soul { @apply border-soul/30 bg-soul/10 text-soul-deep; }

.prose-cp h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 500; margin-bottom: 1.5rem; }
.prose-cp h2 { @apply text-2xl font-medium mt-10 mb-3 tracking-tight; }
.prose-cp h3 { @apply text-lg font-medium mt-6 mb-2; }
.prose-cp p { @apply my-3 leading-relaxed text-[17px]; }
.prose-cp ul { @apply list-disc pl-6 my-3 space-y-1; }
.prose-cp li { @apply leading-relaxed; }
.prose-cp strong { @apply font-semibold; }
.prose-cp em { font-family: var(--font-serif); font-style: italic; font-size: 1.05em; }
.prose-cp a { @apply underline decoration-soul underline-offset-4 hover:text-soul; }
.prose-cp code { @apply bg-cream px-1.5 py-0.5 rounded text-[0.9em]; }

}

/* subtle grain for the dark hero */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@keyframes pulse-soul { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.08); opacity: 1 } }
.soul-dot { animation: pulse-soul 2.4s ease-in-out infinite; }

/* timeline */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 1.05rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--color-soul), var(--color-ink)); }
@media (min-width: 768px) { .timeline::before { left: 50%; margin-left: -1px; } }