/**
 * FeatureNews.VIP Design System
 * Dark "luxury nightlife" design tokens.
 * CSS only — no page builders. Site is always dark.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Core surfaces — gold + black editorial */
  --fnv-bg: #0A0A0A;
  --fnv-fg: #F5F0E8;
  --fnv-card: #111111;

  /* Brand — gold */
  --fnv-primary: #C9A84C;                    /* gold */
  --fnv-primary-fg: #0A0A0A;
  --fnv-neon: #D4B85F;                        /* bright gold */
  --fnv-accent-purple: #3B1A4A;              /* deep purple, used sparingly */

  /* Neutrals */
  --fnv-muted-fg: #888888;
  --fnv-border: rgba(201, 168, 76, 0.25);
  --fnv-border-strong: rgba(201, 168, 76, 0.45);

  /* Gradients */
  --fnv-grad-neon: linear-gradient(135deg, #D4B85F 0%, #C9A84C 50%, #9A7F30 100%);
  --fnv-grad-dark: linear-gradient(180deg, #0A0A0A 0%, #0D0D0D 100%);

  /* Shadows / glow */
  --fnv-shadow-neon: 0 0 0 1px rgba(201,168,76,0.4), 0 10px 40px -10px rgba(201,168,76,0.28);
  --fnv-shadow-glow: 0 8px 30px -10px rgba(201,168,76,0.35);
  --fnv-shadow-card: 0 8px 30px -12px rgba(0,0,0,0.8);

  /* Typography */
  --fnv-font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --fnv-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fnv-text-sm: 0.875rem;
  --fnv-text-base: 1rem;
  --fnv-text-lg: 1.125rem;
  --fnv-text-xl: 1.5rem;
  --fnv-text-2xl: 2.125rem;
  --fnv-text-3xl: 2.75rem;
  --fnv-text-hero: clamp(2.75rem, 7vw, 5rem);
  --fnv-track-wide: 0.25em;

  /* Spacing */
  --fnv-sp-1: 8px;
  --fnv-sp-2: 16px;
  --fnv-sp-3: 24px;
  --fnv-sp-4: 32px;
  --fnv-sp-5: 48px;
  --fnv-sp-6: 64px;
  --fnv-sp-7: 80px;
  --fnv-sp-8: 100px;

  /* Layout */
  --fnv-container-max: 1240px;
  --fnv-container-pad: clamp(16px, 4vw, 32px);
  --fnv-header-max: 1280px;
  /* Sticky-header height — shared by the header bar and the full-height hero's
     `calc(100svh - header)` so the marquee lands correctly. Overridden on mobile. */
  --fnv-header-h: 88px;

  /* Radius — sharp editorial */
  --fnv-r-sm: 2px;
  --fnv-r-md: 4px;
  --fnv-r-lg: 6px;
  --fnv-r-xl: 8px;
  --fnv-r-pill: 999px;

  /* Motion */
  --fnv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fnv-dur: 0.25s;
}

/* ==========================================================================
   2. Base document
   ========================================================================== */

:where(body, .editor-styles-wrapper) {
  background: var(--fnv-grad-dark);
  background-attachment: fixed;
  color: var(--fnv-fg);
  font-family: var(--fnv-font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(body, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--fnv-fg);
  font-family: var(--fnv-font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 0;
}

:where(body, .editor-styles-wrapper) a {
  color: var(--fnv-fg);
  text-decoration: none;
  transition: color var(--fnv-dur) var(--fnv-ease);
}

:where(body, .editor-styles-wrapper) a:hover,
:where(body, .editor-styles-wrapper) a:focus-visible {
  color: var(--fnv-primary);
}

:where(body, .editor-styles-wrapper) a:focus-visible,
:where(body) :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--fnv-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--fnv-neon);
  color: var(--fnv-bg);
}

/* ==========================================================================
   3. Utilities
   ========================================================================== */

.fnv-text-gradient-neon {
  background: var(--fnv-grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fnv-glitter {
  background-image:
    radial-gradient(circle at 20% 20%, oklch(0.82 0.16 90 / 0.15) 0, transparent 2px),
    radial-gradient(circle at 70% 60%, oklch(0.82 0.16 90 / 0.12) 0, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(201,168,76,0.18) 0, transparent 2px);
  background-size: 120px 120px, 160px 160px, 100px 100px;
}

.fnv-marquee {
  animation: fnv-marquee 30s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .fnv-marquee { animation: none; }
}

/* Inline icon sizing */
.fnv-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }