/**
 * Tailwind entry — Inertia/React public pages ONLY.
 *
 * This file is never @vite'd into the Admin bundle (admin.css/admin.js
 * stay Bootstrap-only), so there is no runtime collision either way.
 * Preflight is still intentionally left out below, per the project
 * convention, so utility classes never carry a global reset with them
 * if a stylesheet ever gets shared across bundles later.
 *
 * Import order matters: theme.css defines Tailwind's variable namespace,
 * the local @theme block below then *overrides* those variables with this
 * project's existing design tokens (see resources/css/tokens.css — the
 * PRD's Section 3 design system), and utilities.css must come last so
 * generated utility classes see the final variable values.
 */
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

/* Pin cascade-layer order so utilities always beats base. */
@layer theme, base, utilities;
@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/typography';

/* Self-hosted Geist font-face declarations — shared with the Bootstrap
   side so both tracks render the same typeface during the migration. */
@import './fonts.css';

/* Font Awesome — many admin-configured `icon_class` values from config
   (e.g. 'fa-brands fa-laravel') and DB rows (HeroButton, FloatingTechnology,
   skills, etc.) assume this is loaded, same as it is on the Bootstrap
   side (app.css/admin.css). Imported here too so those strings keep
   working verbatim instead of needing a lucide-icon rewrite per record. */
@import '@fortawesome/fontawesome-free/css/all.min.css';

/* Tell Tailwind's automatic content scanner where React lives, since this
   stylesheet is not sitting next to resources/views like a typical Blade
   project's app.css would be. */
@source '../js/**/*.{js,jsx}';

@theme {
    /* --- Color — ported 1:1 from tokens.css (PRD 3.4) ------------------ */
    --color-primary: #7C3AED;
    --color-primary-hover: #6D28D9;
    --color-light-purple: #F5F1FF;
    --color-extra-light-purple: #FAF8FF;
    --color-background: #FFFFFF;
    --color-card-background: #FFFFFF;
    --color-soft-background: #FAFAFC;
    --color-border: #ECECEC;
    --color-heading: #111111;
    --color-paragraph: #666666;
    --color-dark-section: #0B1020;
    --color-accent-warm: #E0A857;
    --color-accent-warm-soft: #FBF3E7;

    /* --- Type ------------------------------------------------------------ */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, monospace;
    --font-poppins: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-playfair: 'Playfair Display', serif;

    --text-hero: clamp(2.25rem, 3.6vw, 3.25rem);
    --text-section-title: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem); /* ~28px mobile -> 46px desktop */
    --text-card-title: clamp(1.375rem, 2vw, 1.75rem);

    /* --- Radius (PRD 3.8) -------------------------------------------------- */
    --radius-button: 8px;
    --radius-card: 22px;
    --radius-image: 24px;
    --radius-form: 16px;
    --radius-section: 32px;

    /* --- Shadow (PRD 3.9, soft only) --------------------------------------- */
    --shadow-card: 0 10px 40px rgba(0, 0, 0, .05);
    --shadow-card-hover: 0 16px 50px rgba(0, 0, 0, .08);
    --shadow-button-glow: 0 8px 24px rgba(124, 58, 237, .20);

    /* --- Layout (PRD 3.13 / 3.14) ------------------------------------------ */
    --container-max-width: 1170px;
    --spacing-section: 120px;
    --spacing-card-gap: 32px;
    --spacing-card-padding: 32px;

    /* --- Marquee (client logos, two opposite-direction rows) --------------- */
    --animate-marquee: marquee 32s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Testimonials marquee (ui/marquee.jsx) — width-measured so speed stays a
   constant px/s regardless of content length, unlike the fixed-duration
   `marquee` keyframe above (still used by the client-logos section). */
@keyframes marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-100% / var(--marquee-copies)), 0, 0); }
}
@keyframes marquee-right {
    from { transform: translate3d(calc(-100% / var(--marquee-copies)), 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    @keyframes marquee {
        from, to { transform: none; }
    }
    @keyframes marquee-left {
        from, to { transform: none; }
    }
    @keyframes marquee-right {
        from, to { transform: none; }
    }
}

/* shadcn/OriginKit/Universe components generally expect a `border-border`
   utility and a default border color to fall back on — map it onto the
   project's own border token instead of Tailwind's default gray. */
@layer base {
    * {
        border-color: var(--color-border);
    }

    /* Without preflight, the browser's default <a> underline shows up on
       every Link/anchor across the app (header, footer, cards, etc).
       This is the one line of preflight actually needed here — narrow
       enough that it can't collide with the Bootstrap side, since this
       stylesheet never loads there anyway. A component that wants an
       underlined link (rare) can still add `underline` explicitly;
       Tailwind's utilities layer always wins over this base-layer rule. */
    /* Same reasoning as the <a> rule above: no preflight means list
       bullets/numbers show up wherever <ul>/<ol> get used for layout
       (e.g. the testimonials marquee), not just for actual lists. */
    ul, ol {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    /* Root cause of the big empty gaps above/below every section heading
       (h2) and page title (h1): without preflight, headings keep the
       browser's default UA margin (~0.83em top+bottom for h2, more for
       h1). At the clamp()'d --text-section-title/--text-hero sizes that
       margin turns into 40-50px of blank space each side — on every
       section, since they all render through this same tag. Zeroing it
       here (once, globally) makes every heading's spacing come only from
       the explicit mb-3/mt-4/etc. utilities components already set,
       instead of stacking on top of an invisible UA margin too. */
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }
}

/* Preflight is intentionally omitted (see header), so the browser's default
   8px body margin was leaking in as a white strip around the header/hero. */
body {
    margin: 0;
}


/* --- Lenis smooth scroll (required rules) ------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }