/* Marcoflix shared design tokens and universal base styles. */

:root {
  /* ── Color palette ── */
  --mfx-bg:            #0f172a;
  --mfx-surface:       rgba(15, 23, 42, 0.85);
  --mfx-border:        rgba(148, 163, 184, 0.15);
  --mfx-border-subtle: rgba(148, 163, 184, 0.10);
  --mfx-border-strong: rgba(148, 163, 184, 0.25);
  --mfx-text:          #fff;
  --mfx-text-dim:      #e2e8f0;
  --mfx-text-muted:    #94a3b8;
  --mfx-text-faint:    #64748b;
  --mfx-accent:        #f97316;
  --mfx-accent-light:  #fb923c;
  --mfx-accent-pale:   #fdba74;
  --mfx-accent-paler:  #fed7aa;

  /* ── Glass surfaces ── */
  --mfx-glass-1: rgba(255, 255, 255, 0.04);   /* subtle tint on dark */
  --mfx-glass-2: rgba(15, 23, 42, 0.55);      /* card / panel */
  --mfx-glass-3: rgba(15, 23, 42, 0.82);      /* header / modal */

  /* ── Border radius (4 values only) ── */
  --mfx-radius-xs: 6px;
  --mfx-radius-sm: 10px;
  --mfx-radius-md: 14px;
  --mfx-radius-lg: 20px;

  /* ── Type scale ── */
  --mfx-fs-2xs:  10px;
  --mfx-fs-xs:   11px;
  --mfx-fs-sm:   12px;
  --mfx-fs-base: 14px;
  --mfx-fs-md:   16px;
  --mfx-fs-lg:   18px;
  --mfx-fs-xl:   22px;
  --mfx-fs-2xl:  28px;
  --mfx-fs-3xl:  36px;

  /* ── Spacing (4px grid) ── */
  --mfx-space-1:  4px;
  --mfx-space-2:  8px;
  --mfx-space-3:  12px;
  --mfx-space-4:  16px;
  --mfx-space-5:  20px;
  --mfx-space-6:  24px;
  --mfx-space-8:  32px;
  --mfx-space-10: 40px;
  --mfx-space-12: 48px;
  --mfx-space-16: 64px;

  /* ── Motion ── */
  --mfx-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --mfx-duration-fast: 150ms;
  --mfx-duration:      200ms;
  --mfx-duration-slow: 300ms;

  /* ── Shadows ── */
  --mfx-shadow-card:   0 4px 16px rgba(0, 0, 0, 0.3);
  --mfx-shadow-hover:  0 12px 32px rgba(0, 0, 0, 0.4);
  --mfx-shadow-accent: 0 8px 24px rgba(249, 115, 22, 0.35);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  animation: mfx-page-in 250ms var(--mfx-ease) both;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  background: var(--mfx-bg);
  color: var(--mfx-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Focus styles ── */
:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.65);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Page entry animation ── */
@keyframes mfx-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Content entrance animation ── */
@keyframes mfx-content-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { animation: none; }
  .blob { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Shared sticky nav ── */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  background: var(--mfx-glass-3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--mfx-border);
}

.logo {
  font-size: var(--mfx-fs-xs);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--mfx-accent-pale);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: var(--mfx-space-6);
  font-size: var(--mfx-fs-base);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.nav-links a {
  color: var(--mfx-accent-pale);
  font-weight: 600;
  transition: color var(--mfx-duration-fast) ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--mfx-accent-paler);
}

.nav-links .btn-sub {
  background: linear-gradient(135deg, var(--mfx-accent), var(--mfx-accent-light));
  color: var(--mfx-bg) !important;
  padding: 9px 20px;
  border-radius: var(--mfx-radius-sm);
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: transform var(--mfx-duration-fast) ease, box-shadow var(--mfx-duration-fast) ease;
}

.nav-links .btn-sub:hover {
  transform: translateY(-2px);
  box-shadow: var(--mfx-shadow-accent);
}

/* ── Background system ── */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(124, 45, 18, 0.50) 50%,
    rgba(15, 23, 42, 0.95) 100%
  );
}

.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: 0.28;
  animation: blob 18s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

.blob-1 { top: -200px; right: -200px; width: 500px; height: 500px; background: #fb923c; }
.blob-2 { bottom: -200px; left: -150px; width: 500px; height: 500px; background: #f59e0b; animation-delay: -6s; }

@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -50px) scale(1.1); }
  66%       { transform: translate(-30px, 30px) scale(0.95); }
}

/* ── Header browse / subscribe button ── */
.mfx-header-browse { display:inline-flex !important; align-items:center; }
.nav-links .btn-sub { display:inline-flex; align-items:center; }
.mfx-header-browse, .nav-links .btn-sub {
  background:linear-gradient(135deg,#f97316,#fb923c) !important;
  border:none !important;
  color:#0f172a !important;
  padding:8px 16px !important;
  border-radius:10px !important;
  font-weight:700 !important;
  font-size:13px !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(251,146,60,.25);
}
.mfx-header-browse:hover, .nav-links .btn-sub:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(251,146,60,.4);
  color:#0f172a !important;
}

/* ── Skeleton shimmer ── */
.sk {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
  border-radius: var(--mfx-radius-sm);
}

@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}