/* ==========================================================================
   Pantera LP — design tokens
   Brand palette mirrors $colors in public/index.php (black / gold / whites).
   Every other token derives from those, re-skinning the reference motion
   language (dark surfaces, glass cards, fluid type scale) to Pantera.
   ========================================================================== */
:root {
  /* --- Brand (source of truth: $colors in index.php) --- */
  --lp-brand-black: #1a1a1a;
  --lp-brand-gold: #f4c430;
  --lp-brand-gold-deep: #e6b800;
  --lp-brand-white: #ffffff;
  --lp-brand-gray: #f8fafc;
  --lp-brand-dark-gray: #2d3748;
  --lp-brand-text: #2d3748;
  --lp-brand-text-light: #718096;

  /* --- Semantic: dark theme (page) --- */
  --lp-bg: #0f0f0f;                 /* page */
  --lp-bg-2: #1a1a1a;               /* elevated band */
  --lp-card: #1c1c1c;               /* glass card base */
  --lp-card-border: #2a2a2a;
  --lp-card-inset: rgba(255, 255, 255, 0.04);
  --lp-fg: #f5f5f5;                 /* 18:1 on --lp-bg */
  --lp-fg-muted: #a8a8a8;           /* 8.3:1 on --lp-bg */
  --lp-fg-subtle: #7a7a7a;          /* 4.7:1 on --lp-bg (decorative / small caps only) */
  --lp-line: rgba(255, 255, 255, 0.08);
  --lp-accent: var(--lp-brand-gold);
  --lp-accent-2: var(--lp-brand-gold-deep);
  --lp-on-accent: #141414;          /* 12.4:1 on gold */
  --lp-accent-soft: rgba(244, 196, 48, 0.14);
  --lp-accent-line: rgba(244, 196, 48, 0.35);
  --lp-success: #10b981;
  --lp-danger: #ef4444;

  /* --- Semantic: light surface (reveal footer) --- */
  --lp-light-bg: #ffffff;
  --lp-light-bg-2: var(--lp-brand-gray);
  --lp-light-fg: var(--lp-brand-black);
  --lp-light-muted: var(--lp-brand-text-light); /* 4.6:1 on white */
  --lp-light-line: rgba(26, 26, 26, 0.1);

  /* --- Radii (reference: --radius 1.5rem on every card / button / nav) --- */
  --lp-radius: 1.5rem;
  --lp-radius-md: 1rem;
  --lp-radius-sm: 0.75rem;
  --lp-radius-xs: 0.5rem;
  --lp-radius-full: 999px;

  /* --- Layout --- */
  --lp-content: clamp(20rem, 67.5vw, 100rem);
  --lp-gutter: 1rem;
  --lp-section-y: clamp(3.5rem, 6vw, 5rem);     /* reference py-20 */
  --lp-head-gap: clamp(2rem, 3vw, 2.5rem);       /* header -> content */
  --lp-gap: 1.25rem;                              /* grid gap */
  --lp-card-pad: clamp(1.25rem, 2vw, 2rem);
  --lp-nav-top: 1.25rem;
  --lp-nav-h: 4.5rem;

  /* --- Type: fluid scale (clamp(min, vw, max)), Inter everywhere --- */
  --lp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lp-text-2xs: 0.6875rem;
  --lp-text-xs: clamp(0.75rem, 0.8vw, 0.8125rem);
  --lp-text-sm: clamp(0.8125rem, 0.9vw, 0.875rem);
  --lp-text-base: clamp(0.9375rem, 1vw, 1rem);
  --lp-text-lg: clamp(1rem, 1.1vw, 1.0625rem);
  --lp-text-xl: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --lp-text-2xl: clamp(1.1875rem, 1.4vw, 1.375rem);
  --lp-text-3xl: clamp(1.375rem, 1.7vw, 1.625rem);
  --lp-text-4xl: clamp(1.625rem, 2.1vw, 2rem);
  --lp-text-5xl: clamp(1.875rem, 2.75vw, 2.75rem);
  --lp-text-6xl: clamp(2.125rem, 3.3vw, 3.25rem);
  --lp-text-7xl: clamp(2.5rem, 4vw, 4rem);
  --lp-text-8xl: clamp(2.75rem, 4.5vw, 4.5rem);
  --lp-leading-display: 1.1;
  --lp-leading-heading: 1.15;
  --lp-leading-snug: 1.375;
  --lp-leading-body: 1.55;
  --lp-tracking-display: -0.015em;
  --lp-tracking-caps: 0.08em;

  /* --- Shadows --- */
  --lp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --lp-shadow-float: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --lp-shadow-cta:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.22),
    0 4px 12px -2px rgba(244, 196, 48, 0.35);
  --lp-shadow-cta-hover:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.22),
    0 8px 20px -4px rgba(244, 196, 48, 0.5);

  /* --- Gradients --- */
  --lp-grad-cta: linear-gradient(165deg, #f7d15c 0%, var(--lp-brand-gold) 40%, #dcb02b 100%);
  --lp-grad-heading: linear-gradient(90deg, var(--lp-fg) 0%, var(--lp-brand-gold) 100%);
  --lp-grad-gold-text: linear-gradient(135deg, var(--lp-brand-gold), var(--lp-brand-gold-deep));
  --lp-grad-card: linear-gradient(to bottom right, rgba(28, 28, 28, 0.88), rgba(28, 28, 28, 0.55));
  --lp-grad-secondary: linear-gradient(to bottom right, rgba(38, 38, 38, 0.85), #262626);

  /* --- Masks (reference mask-fade-*) --- */
  --lp-mask-x: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  --lp-mask-x-soft: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  --lp-mask-y: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  --lp-mask-bottom: linear-gradient(to bottom, #000 40%, transparent 100%);

  /* --- Motion --- */
  --lp-ease-out: cubic-bezier(0, 0, 0.58, 1);            /* framer "easeOut" (ScrollReveal, buttons) */
  --lp-ease-blur: cubic-bezier(0.45, 0, 0.55, 1);        /* TextAnimation fade-blur */
  --lp-ease-slide: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* TextAnimation slide-up */
  --lp-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);         /* BorderGlow angle, dropdown feel */
  --lp-ease-std: cubic-bezier(0.4, 0, 0.2, 1);           /* Tailwind default (hover transitions) */
  --lp-dur-fast: 300ms;
  --lp-dur-hover: 400ms;
  --lp-dur: 600ms;
  --lp-dur-slow: 700ms;
  --lp-stagger: 40ms;             /* word stagger */
  --lp-stagger-cards: 70ms;       /* card stagger (enhancement over the reference's group reveal) */
  --lp-marquee-x-speed: 42;       /* px per second (JS derives duration) */
  --lp-marquee-y-speed: 22;
  --lp-orbit-dur: 12s;
}