@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views';

@theme {
    /* Type — display: Figtree (700), body: Poppins */
    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-display: 'Figtree', 'Poppins', ui-sans-serif, system-ui, sans-serif;

    /* Ink — the template's slate-navy text (#274760) */
    --color-navy-50: #eef2f5;
    --color-navy-100: #d3dde4;
    --color-navy-200: #a9bcc9;
    --color-navy-300: #7593a6;
    --color-navy-400: #4d7086;
    --color-navy-500: #274760;
    --color-navy-600: #223c52;
    --color-navy-700: #1d3345;
    --color-navy-800: #172838;
    --color-navy-900: #101c28;
    --color-navy-950: #0a141d;

    /* Accent — exact template blue #307BC4. The `teal-*` scale is repurposed
       to this blue so every legacy `teal-*` utility renders as the accent. */
    --color-teal-50: #eef4fa;
    --color-teal-100: #d5e5f1;
    --color-teal-200: #b0d0ec;
    --color-teal-300: #7fb0df;
    --color-teal-400: #5296d4;
    --color-teal-500: #2a74ac;
    --color-teal-600: #246ca0;
    --color-teal-700: #1d567f;
    --color-teal-800: #183f5c;
    --color-teal-900: #1b3f63;

    /* Soft blue paper tints */
    --color-stone-50: #f4f8fc;
    --color-stone-100: #e9f1f9;
    --color-stone-200: #dbe8f4;
    --color-stone-300: #c4d8ec;

    /* Semantic aliases */
    --color-ink: #274760;
    --color-muted: #6a8296;
    --color-line: #dce7f0;
    --color-canvas: #eef4fb;

    --shadow-card: 0 6px 20px -6px rgba(39, 71, 96, 0.12);
    --shadow-soft: 0 30px 60px -24px rgba(39, 71, 96, 0.22);
}

@layer base {
    [x-cloak] { display: none !important; }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-white text-ink antialiased;
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: -0.01em;
        text-wrap: balance;
    }

    ::selection {
        background: var(--color-teal-500);
        color: #fff;
    }

    /* Scroll-reveal — only active when JS enables it (content visible without JS) */
    .js-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(20px);
    }
    .js-reveal [data-reveal].is-visible {
        opacity: 1;
        transform: none;
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (prefers-reduced-motion: reduce) {
        .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
    }
}

@layer components {
    .container-x {
        @apply mx-auto w-full max-w-7xl px-6 lg:px-8;
    }

    .container-tight {
        @apply mx-auto w-full max-w-5xl px-6 lg:px-8;
    }

    .section {
        @apply py-20 lg:py-28;
    }

    .eyebrow {
        @apply inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-teal-600;
    }

    /* Pill eyebrow chip (ProHealth-style) */
    .chip {
        @apply inline-flex items-center gap-2 rounded-full bg-teal-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-teal-700 ring-1 ring-inset ring-teal-500/15;
    }
    .chip-dark {
        @apply inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-teal-50 ring-1 ring-inset ring-white/20;
    }

    /* Rounded icon tiles — soft-blue and solid-blue (ProHealth badges) */
    .icon-tile {
        @apply grid place-items-center rounded-2xl bg-teal-500/12 text-teal-600;
    }
    /* Solid blue badge (name kept for compatibility; no longer navy) */
    .icon-tile-navy {
        @apply grid place-items-center rounded-2xl bg-teal-600 text-white shadow-[0_10px_24px_-10px_rgba(48,123,196,0.6)];
    }
    /* Circular soft-blue icon badge (Our Values / feature bar) */
    .icon-circle {
        @apply grid place-items-center rounded-full bg-teal-500/10 text-teal-600 ring-1 ring-inset ring-teal-500/15;
    }

    .card {
        @apply rounded-3xl border border-line bg-white shadow-card transition-all duration-300;
    }
    .card-hover {
        @apply hover:-translate-y-1 hover:shadow-soft;
    }

    /* Rich-text (RichEditor / prose) content */
    .prose-content {
        @apply text-[1.0625rem] leading-relaxed text-muted;
    }
    .prose-content > * + * { @apply mt-5; }
    .prose-content h2 { @apply mt-10 text-2xl font-semibold text-ink; }
    .prose-content h3 { @apply mt-8 text-xl font-semibold text-ink; }
    .prose-content p { @apply text-muted; }
    .prose-content strong { @apply font-semibold text-ink; }
    .prose-content a { @apply text-teal-700 underline underline-offset-2 hover:text-teal-800; }
    .prose-content ul { @apply space-y-2 pl-0; }
    .prose-content ul li { @apply relative pl-6; }
    .prose-content ul li::before {
        content: '';
        @apply absolute left-0 top-[0.6em] h-1.5 w-1.5 rounded-full bg-teal-500;
    }
    .prose-content ol { @apply list-decimal space-y-2 pl-5; }
    .prose-content blockquote { @apply border-l-2 border-teal-500 pl-5 italic text-ink; }
}