/* =============================================================
   landing-tokens.css — shared design tokens for the marketing
   landing page. Load BEFORE landing-hero-funnel.css and
   landing-marketing.css.

   Token names follow the Data Funnel reference (--primary,
   --bg-base, --card-bg, …). Audited against every stylesheet in
   the project including Bootstrap: none of these names were
   previously defined, so declaring them at :root is safe.

   Theme switching uses the project's existing convention —
   <html data-theme="light|dark"> — rather than the reference's
   `body.dark-mode` class, so the landing page honours the
   server-persisted theme toggle already in the layout.
   ============================================================= */

:root {
    /* ── Typography ────────────────────────────────────────
       Inter leads, matching the reference. DM Sans is the
       project's existing body face and acts as the fallback so
       the page still renders correctly if the webfont is
       blocked. Cairo (added globally in the layout) takes over
       automatically for Arabic via the [dir="rtl"] rules. */
    --font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Inter', 'Poppins', 'DM Sans', sans-serif;

    /* ── Surfaces ──────────────────────────────────────────────
       THREE levels, each with a fixed job. The page previously mixed
       four values across full-width bands and cards with no rule about
       which belonged where, which is what made it feel assembled rather
       than designed.

         --bg-base      the page canvas, and nothing else. No section is
                        allowed to change the full-width background;
                        sections are separated by spacing and type.
         --bg-elevated  THE card surface. Every card, panel, tile, plan
                        and quote uses this one value.
         --bg-subtle    nested insets only — a well *inside* a card, such
                        as a screenshot frame. Never a section.

       Translucency is applied locally with color-mix() against these
       tokens rather than by inventing separate rgb() values, so the hero
       glass stays visibly related to the cards below it. */
    --bg-base: #fcfcfc;
    --bg-elevated: #ffffff;
    --bg-subtle: #f5f5f7;
    --bg-grid: rgba(0, 0, 0, 0.03);

    /* ── Text ────────────────────────────────────────────── */
    --text-primary: #09090b;
    --text-secondary: #52525b;
    --text-tertiary: #a1a1aa;

    /* ── Borders ─────────────────────────────────────────── */
    --border-light: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.15);

    /* ── Brand ──────────────────────────────────────────────
       --primary mirrors the project's --mz-accent (#E8212A) so
       the landing page and the rest of the site stay one brand. */
    --primary: #E8212A;
    --primary-hover: #B8171C;
    --primary-glow: rgba(232, 33, 42, 0.15);
    --primary-soft: #fef2f2;
    --primary-tint: rgba(232, 33, 42, 0.14);
    --positive: #10b981;
    --positive-soft: rgba(16, 185, 129, 0.12);

    /* ── Cards ───────────────────────────────────────────── */
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(255, 255, 255, 0.6);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --card-shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, 0.15);
    --card-radius: 16px;
    --card-radius-lg: 24px;

    /* ── Motion ──────────────────────────────────────────── */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-sm: 0.18s;
    --dur-md: 0.32s;
    --dur-lg: 0.55s;

    /* ── Spacing ─────────────────────────────────────────── */
    --lp-section-y: clamp(2.5rem, 5vw, 4rem);
    --lp-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --lp-maxw: 1140px;

    /* ── Funnel geometry ─────────────────────────────────────
       Lives here rather than on the hero so the marketing sections can
       reference the same depth model.

       These match the reference's proportions against a stage that spans
       most of the hero. Note that perspective compresses rows toward the
       vanishing point, so translateY values look far larger than the
       resulting on-screen separation — the only reliable way to tune these
       is to render and look. */
    --r1-y: -30vh;  --r1-z: -200px; --r1-r: -8deg;
    --r2-y: -15vh;  --r2-z: -100px; --r2-r: 8deg;
    --r3-y: 0vh;    --r3-z: 0px;    --r3-r: -4deg;
    --r4-y: 15vh;   --r4-z: 100px;  --r4-r: 4deg;

    /* JS-driven parallax tilt */
    --rotate-x: 0deg;
    --rotate-y: 0deg;
}

/* ── Dark theme ───────────────────────────────────────────
   Selected values are brightened for contrast on a near-black
   canvas: --primary lifts to the project's --mz-accent-light so
   headings and buttons clear WCAG AA against #050508. */
[data-theme="dark"] {
    --bg-base: #050508;
    --bg-elevated: #0f0f14;
    --bg-subtle: #18181b;
    --bg-grid: rgba(255, 255, 255, 0.03);

    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #6b6b74;

    --border-light: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);

    --primary: #FF5058;
    --primary-hover: #E8212A;
    --primary-glow: rgba(255, 80, 88, 0.25);
    --primary-soft: rgba(255, 80, 88, 0.10);
    --primary-tint: rgba(255, 80, 88, 0.16);
    --positive: #34d399;
    --positive-soft: rgba(52, 211, 153, 0.14);

    --card-bg: rgba(18, 18, 24, 0.9);
    --card-border: rgba(255, 255, 255, 0.05);
    --card-shadow: 0 10px 40px -10px rgba(255, 80, 88, 0.15);
    --card-shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

/* The landing page is one continuous canvas. Scoped to .lp-page so the
   funnel's surface never leaks into storefront or account pages, and
   deliberately NOT a distinct colour — a page-level tint is exactly the
   banding that made each section read as a separate product. */
.lp-page {
    position: relative;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    /* Smooth in-page nav for the anchor links. Disabled under
       reduced-motion below. */
    scroll-behavior: smooth;
    scroll-padding-top: 6rem; /* clears the fixed navbar */
}

/*
 * No grid layer here.
 *
 * A data-grid texture used to span the hero and the sections beneath it, on
 * the theory that a shared background would make the boundary invisible. It
 * had the opposite effect: the grid ran on past the hero, so every section
 * below inherited the hero's texture and read as more hero. The sections now
 * share a flat canvas with the hero and are told apart by spacing, the
 * funnel overhang, and the type — not by a background pattern.
 *
 * --bg-grid stays defined for any future local use; nothing applies it
 * globally any more.
 */

/* Arabic keeps Cairo for readability; Inter has no Arabic glyphs. */
[dir="rtl"] .lp-page,
[dir="rtl"] .lp-page h1,
[dir="rtl"] .lp-page h2,
[dir="rtl"] .lp-page h3,
[dir="rtl"] .lp-page h4 {
    font-family: 'Cairo', 'DM Sans', sans-serif;
}

/* ── Reduced motion ─────────────────────────────────────────
   One global guard for every landing animation, including the
   funnel. Individual files add layout fallbacks so parked
   content stays readable rather than collapsing. */
@media (prefers-reduced-motion: reduce) {
    .lp-page {
        scroll-behavior: auto;
    }
    .lp-page *,
    .lp-page *::before,
    .lp-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}