@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
    --color-primary:      #0F3D2E;
    --color-primary-dark: #071f17;
    --color-primary-mid:  #145235;
    --color-teal:         #1F7A6E;
    --color-teal-dark:    #16685e;
    --color-amber:        #C89B3C;
    --color-amber-dark:   #b8841f;
    --color-graphite:     #1A1D1C;
    --color-surface:      #F5F7F6;
    --color-border:       #dde3e0;
    --color-text:         #1A1D1C;
    --color-text-muted:   #5d6360;

    --header-height: 72px;
    --transition-base: 200ms cubic-bezier(0.22, 0.68, 0, 1.2);
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
@layer base {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body {
        @apply bg-surface font-sans text-graphite-900 antialiased;
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-display font-bold tracking-tight text-graphite-900;
    }

    p { @apply leading-relaxed; }

    a { @apply transition-colors duration-200; }

    img { @apply max-w-full; }

    ::selection {
        background-color: rgba(31, 122, 110, 0.2);
        color: #0F3D2E;
    }

    /* Focus ring — accessible & on-brand */
    :focus-visible {
        @apply outline-2 outline-offset-2 outline-teal-500 rounded;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar       { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #F5F7F6; }
    ::-webkit-scrollbar-thumb { @apply bg-teal-300 rounded-full; }
    ::-webkit-scrollbar-thumb:hover { @apply bg-teal-500; }
}

/* ─── Components ──────────────────────────────────────────────────────────── */
@layer components {

    /* ── Buttons ── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 font-semibold rounded-xl
               transition-all duration-200 cursor-pointer select-none whitespace-nowrap;
    }

    .btn-primary {
        @apply btn bg-amber-500 text-graphite-900 hover:bg-amber-600 active:bg-amber-700
               shadow-cta hover:shadow-lg px-6 py-3 text-sm;
    }

    .btn-primary-lg {
        @apply btn bg-amber-500 text-graphite-900 hover:bg-amber-600 active:bg-amber-700
               shadow-cta hover:shadow-lg px-8 py-4 text-base;
    }

    .btn-outline {
        @apply btn border-2 border-current px-6 py-3 text-sm;
    }

    .btn-outline-white {
        @apply btn border-2 border-white text-white hover:bg-white hover:text-emerald-900
               px-6 py-3 text-sm;
    }

    .btn-outline-emerald {
        @apply btn border-2 border-emerald-900 text-emerald-900
               hover:bg-emerald-900 hover:text-white px-6 py-3 text-sm;
    }

    .btn-ghost {
        @apply btn text-teal-500 hover:text-teal-600 hover:bg-teal-50 px-4 py-2 text-sm;
    }

    .btn-sm {
        @apply px-4 py-2 text-xs;
    }

    /* ── Links ── */
    .link-teal {
        @apply text-teal-500 hover:text-teal-600 font-medium underline-offset-4 hover:underline;
    }

    .link-muted {
        @apply text-graphite-500 hover:text-graphite-800 transition-colors;
    }

    /* ── Cards ── */
    .card {
        @apply bg-white rounded-xl3 shadow-card border border-graphite-100 overflow-hidden
               transition-all duration-300;
    }

    .card-hover {
        @apply card hover:shadow-card-hover hover:-translate-y-1;
    }

    .card-dark {
        @apply bg-emerald-900 rounded-xl3 border border-emerald-800 overflow-hidden;
    }

    /* ── Section layouts ── */
    .section {
        @apply py-20 lg:py-28;
    }

    .section-sm {
        @apply py-12 lg:py-16;
    }

    .container-site {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .container-wide {
        @apply max-w-8xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* ── Section labels ── */
    .section-label {
        @apply inline-flex items-center gap-1.5 text-xs font-semibold tracking-widest
               uppercase text-teal-500 mb-4;
    }

    .section-label-amber {
        @apply section-label text-amber-500;
    }

    /* ── Headings ── */
    .heading-xl {
        @apply text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.1];
    }

    .heading-lg {
        @apply text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight leading-[1.15];
    }

    .heading-md {
        @apply text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight leading-[1.2];
    }

    .heading-sm {
        @apply text-xl sm:text-2xl font-bold tracking-tight leading-snug;
    }

    .subheading {
        @apply text-lg sm:text-xl text-graphite-500 leading-relaxed max-w-2xl;
    }

    .subheading-lg {
        @apply text-xl sm:text-2xl text-graphite-400 leading-relaxed max-w-3xl;
    }

    /* ── Feature bullets ── */
    .feature-check {
        @apply flex items-start gap-3 text-sm text-graphite-600;
    }

    .feature-check-icon {
        @apply flex-shrink-0 w-5 h-5 rounded-full bg-teal-50 text-teal-500
               flex items-center justify-center mt-0.5;
    }

    /* ── Badge / pill ── */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
    }

    .badge-teal    { @apply badge bg-teal-50 text-teal-700; }
    .badge-emerald { @apply badge bg-emerald-50 text-emerald-800; }
    .badge-amber   { @apply badge bg-amber-50 text-amber-700; }

    /* ── Nav ── */
    .nav-link {
        @apply text-sm font-medium text-graphite-700 hover:text-emerald-900
               transition-colors duration-150 relative;
    }

    .nav-link-active {
        @apply text-emerald-900;
    }

    /* ── Form inputs ── */
    .form-input {
        @apply w-full rounded-xl border border-graphite-200 bg-white px-4 py-3 text-sm
               text-graphite-900 placeholder-graphite-400 shadow-xs
               focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500
               transition duration-200;
    }

    .form-select {
        @apply form-input appearance-none pr-10 cursor-pointer;
    }

    .form-label {
        @apply block text-sm font-semibold text-graphite-700 mb-1.5;
    }

    .form-error {
        @apply mt-1 text-xs text-red-600;
    }

    /* ── Dividers ── */
    .divider {
        @apply border-t border-graphite-100;
    }

    .divider-emerald {
        @apply border-t border-emerald-800;
    }

    /* ── Proof strip items ── */
    .stat-block {
        @apply text-center;
    }

    .stat-value {
        @apply text-3xl sm:text-4xl font-bold text-emerald-900;
    }

    .stat-label {
        @apply text-sm text-graphite-500 mt-1;
    }

    /* ── Industry card ── */
    .industry-card {
        @apply card-hover p-7 flex flex-col gap-4 group cursor-pointer;
    }

    .industry-icon {
        @apply w-12 h-12 rounded-xl flex items-center justify-center
               bg-emerald-50 text-emerald-900 group-hover:bg-emerald-900
               group-hover:text-white transition-all duration-300;
    }

    /* ── CTA band ── */
    .cta-band {
        @apply bg-hero-gradient bg-subtle-grid;
    }

    /* ── Sticky demo bar ── */
    .sticky-demo-bar {
        @apply fixed bottom-0 left-0 right-0 z-40 bg-emerald-900 border-t border-emerald-800
               transform translate-y-0 transition-transform duration-300;
    }

    /* ── Table ── */
    .comparison-table {
        @apply w-full border-collapse text-sm;
    }

    .comparison-table th {
        @apply py-4 px-6 text-left font-semibold bg-graphite-50 border-b border-graphite-200;
    }

    .comparison-table td {
        @apply py-4 px-6 border-b border-graphite-100;
    }

    .comparison-table tr:last-child td {
        @apply border-0;
    }

    /* ── Integration pill ── */
    .integration-pill {
        @apply flex items-center gap-3 bg-white border border-graphite-100 rounded-xl
               px-5 py-3 shadow-xs hover:shadow-card transition-all duration-200;
    }

    /* ── Page hero (inner pages) ── */
    .page-hero {
        @apply bg-hero-gradient bg-subtle-grid pt-28 pb-20 lg:pt-36 lg:pb-28;
    }

    .page-hero-label {
        @apply section-label text-teal-300;
    }

    .page-hero-title {
        @apply heading-lg text-white max-w-4xl;
    }

    .page-hero-subtitle {
        @apply text-lg sm:text-xl text-emerald-200 leading-relaxed max-w-3xl mt-5;
    }

    /* ── Screen mockup frame ── */
    .screen-frame {
        @apply bg-graphite-900 rounded-xl3 overflow-hidden shadow-hero border border-graphite-700;
    }

    .screen-frame-bar {
        @apply bg-graphite-800 px-4 py-2.5 flex items-center gap-2;
    }

    .screen-dot {
        @apply w-2.5 h-2.5 rounded-full;
    }
}

/* ─── Utilities ───────────────────────────────────────────────────────────── */
@layer utilities {
    .text-balance  { text-wrap: balance; }
    .text-pretty   { text-wrap: pretty; }

    .animate-delay-100 { animation-delay: 100ms; }
    .animate-delay-200 { animation-delay: 200ms; }
    .animate-delay-300 { animation-delay: 300ms; }
    .animate-delay-400 { animation-delay: 400ms; }
    .animate-delay-500 { animation-delay: 500ms; }
    .animate-delay-600 { animation-delay: 600ms; }

    /* Gradient text */
    .text-gradient-emerald {
        @apply bg-gradient-to-r from-teal-400 to-emerald-300 bg-clip-text text-transparent;
    }

    .text-gradient-amber {
        @apply bg-gradient-to-r from-amber-400 to-amber-300 bg-clip-text text-transparent;
    }

    /* Scrollbar hide */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar { display: none; }

    /* Prose overrides */
    .prose-emerald h2,
    .prose-emerald h3 { @apply text-emerald-900; }

    /* Highlight span */
    .highlight-amber { @apply text-amber-500 font-semibold; }
    .highlight-teal  { @apply text-teal-500 font-semibold; }

    /* Glass card */
    .glass {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .glass-dark {
        background: rgba(15, 61, 46, 0.60);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Number pill */
    .number-pill {
        @apply flex-shrink-0 w-8 h-8 rounded-full bg-amber-500 text-graphite-900
               font-bold text-sm flex items-center justify-center;
    }
}

/* ─── Header scroll behaviour ─────────────────────────────────────────────── */
.header-scrolled {
    @apply shadow-panel bg-white/95 backdrop-blur-md;
}

/* ─── Mega menu animation ─────────────────────────────────────────────────── */
.mega-menu {
    transform-origin: top center;
    transition: opacity 150ms ease, transform 150ms ease;
}

.mega-menu[x-cloak] { display: none; }

/* ─── Testimonial card ────────────────────────────────────────────────────── */
.testimonial-card {
    @apply bg-white rounded-xl3 shadow-card border border-graphite-100 p-8
           flex flex-col gap-6;
}

/* ─── KDS / device mockup colours ────────────────────────────────────────── */
.kds-screen {
    background: #111613;
    border: 2px solid #2a2e2c;
}

/* ─── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
}