@import "tailwindcss";

/* ---------------------------------------------------------------
   FarmPilot design tokens
   Paper-sage ground, fir-green ink, bore-water blue for actions,
   harvest amber reserved for the pre-launch badge + featured plan.
---------------------------------------------------------------- */
@theme {
    --color-paper: #f2f4ef;
    --color-ink: #182720;
    --color-field: #2e5b3f;
    --color-field-deep: #1e3f2c;
    --color-water: #1a63c8;
    --color-water-deep: #124a99;
    --color-amber: #d98e1b;
    --color-stone: #75816f;
    --color-hairline: #d9dfd2;
    --color-panel: #0f1c15;

    --font-display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
    --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    --font-tele: "IBM Plex Mono", ui-monospace, monospace;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-body);
        background: var(--color-paper);
        color: var(--color-ink);
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, .display {
        font-family: var(--font-display);
        letter-spacing: -0.02em;
    }

    ::selection {
        background: var(--color-field);
        color: var(--color-paper);
    }

    :focus-visible {
        outline: 2px solid var(--color-water);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer components {
    .wrap {
        @apply mx-auto w-full max-w-6xl px-5 sm:px-8;
    }

    .eyebrow {
        font-family: var(--font-tele);
        @apply text-xs uppercase tracking-[0.22em] text-stone;
    }

    .btn-water {
        @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-3 text-sm font-semibold transition-colors bg-water text-white hover:bg-water-deep;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-3 text-sm font-semibold transition-colors border border-hairline bg-white/60 text-ink hover:border-field hover:text-field-deep;
    }

    .field-input {
        @apply w-full rounded-md border border-hairline bg-white px-4 py-3 text-sm text-ink placeholder:text-stone focus:border-water;
    }

    /* SCADA-style telemetry readout — the page signature */
    .tele-panel {
        background: var(--color-panel);
        border: 1px solid #23382c;
        box-shadow: 0 24px 60px -30px rgba(15, 28, 21, 0.55);
    }

    .tele-row {
        font-family: var(--font-tele);
        @apply flex items-baseline justify-between gap-4 border-b border-white/5 py-2.5 text-[13px];
    }

    .tele-label { @apply text-white/45 uppercase tracking-wider text-[11px]; }
    .tele-value { @apply text-emerald-300 tabular-nums; }
    .tele-ok    { @apply text-emerald-400; }
    .tele-warn  { color: var(--color-amber); }

    .tele-dot {
        @apply inline-block size-1.5 rounded-full bg-emerald-400;
        animation: tele-pulse 2.4s ease-in-out infinite;
    }

    @keyframes tele-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.25; }
    }

    /* Rendered markdown (pages, posts) */
    .prose-farm { @apply text-[17px] leading-relaxed; }
    .prose-farm h2 { @apply mt-10 mb-3 text-2xl font-bold; }
    .prose-farm h3 { @apply mt-8 mb-2 text-xl font-bold; }
    .prose-farm p { @apply my-4; }
    .prose-farm a { @apply text-water underline underline-offset-2 hover:text-water-deep; }
    .prose-farm ul { @apply my-4 list-disc pl-6; }
    .prose-farm ol { @apply my-4 list-decimal pl-6; }
    .prose-farm li { @apply my-1; }
    .prose-farm blockquote { @apply my-6 border-l-4 border-field pl-4 text-stone italic; }
    .prose-farm img { @apply my-6 rounded-lg; }
    .prose-farm code { font-family: var(--font-tele); @apply rounded bg-ink/5 px-1.5 py-0.5 text-[0.9em]; }
    .prose-farm pre { @apply my-6 overflow-x-auto rounded-lg bg-panel p-4 text-emerald-100; }
    .prose-farm pre code { @apply bg-transparent p-0; }
}
